Redimensionnement des images dans JQuery peu après l’ajout au DOM? - javascript, jquery, image, dom, redimensionner

Je fais quelque chose comme ça:

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});
});

Maintenant, je suis presque sûr que la partie de redimensionnement de l’image convient parfaitement ... surtout qu’elle correspond à cette réponse. http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

Le problème que parfois ça marche, parfois çadoesn "t. (il montrera parfois une résolution native et redimensionnée sur d'autres) Il semble que le vrai problème soit ici. Peut-être que le redimensionnement sera appelé avant que l'image ne soit réellement dans le DOM pour la sélectionner à nouveau juste après? Any vos conseils seraient grandement appréciés.

Réponses:

Je suppose que les images ne sont pas encore chargées parfois. Dans ce cas, la taille d'origine reste inconnue (0) et le calcul conduit aux valeurs de NaN en raison de la division par zéro.

Le redimensionnement lorsque l'événement de chargement des images se déclenche devrait être une option.

Vous aurez besoin du plug-in d'événements de chargement d'images spéciales. Sinon, l’événement ne se déclenchera pas si l’image se trouve déjà dans le cache du navigateur. Vous pouvez alors procéder comme suit:

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