Ridimensionamento delle immagini in Jquery presto dopo l'aggiunta al DOM? - javascript, jquery, image, dom, ridimensiona

Sto facendo qualcosa del genere:

maxDim = 100;
$("div.images").html("<img class="pull" src="/images/"+imgs[img_i]+"" />");
$("img.pull").each(function(i){
if( $(this).height() > $(this).width() ){
var h = maxDim;
var w = Math.ceil( $(this).width() / $(this).height() * maxDim);
}
else{
var w = maxDim;
var h = Math.ceil( $(this).height() / $(this).width() * maxDim);
}
$(this).css({height:h, width:w});
});

Ora sono abbastanza sicuro che l'immagine che ridimensiona la parte va bene ... specialmente perché corrisponde a questa risposta http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

Il problema che a volte funziona, a volte è cosìdoesn "t (visualizzerà a volte la risoluzione nativa a volte e ridimensionata su altri) Sembra che il timing sia il vero problema qui. Forse il ridimensionamento viene chiamato prima che l'immagine sia effettivamente nel DOM per selezionarla di nuovo subito dopo? consiglio che voi ragazzi sareste molto apprezzati.

risposte:

Immagino che le immagini non vengano ancora caricate a volte. In tal caso, la dimensione originale è ancora sconosciuta (0) e il calcolo conduce ai valori NaN a causa della divisione per zero.

Ridimensionamento quando l'evento di caricamento delle immagini si attiva deve essere un'opzione.

Avrai bisogno del plug-in evento speciale caricamento immagine. Altrimenti, l'evento non si attiva se l'immagine è già nella cache del browser, quindi puoi farlo:

$("img.pull").load(function(i){
// ...
});