Pourquoi mon code de redimensionnement d'image jQuery ne fonctionne-t-il que par intermittence ?

Question

Premier poste.J'ai cherché haut et bas des questions similaires et je suis revenu les mains vides, alors voilà.

J'utilise actuellement un petit peu de jQuery pour mettre à l'échelle proportionnellement une collection d'images à afficher dans un carrousel d'images (merci aux utilisateurs SO pour une grande partie de ce code).Le carrousel est alimenté par le plugin jCarousel Lite (ici).J'ai 4 ensembles d'images différents, qui sont sélectionnés à l'aide d'un menu de navigation.Lorsqu'un nouvel ensemble d'images est sélectionné, le code de redimensionnement jQuery suivant s'exécute sur chaque image de l'ensemble, puis le carrousel d'images est initialisé à l'aide des images fraîchement redimensionnées dans le div #slider.

Le problème:ce code ne fonctionne que parfois, apparemment de manière aléatoire.Lorsque le curseur s'initialise, si les images ne sont pas mises à l'échelle correctement, toutes les largeurs sont augmentées jusqu'à la largeur maximale, recadrant ainsi le bas de l'image.Ce problème est particulièrement apparent pour les images orientées portrait, car le curseur est conçu pour les images orientées paysage (900 px x 600 px).Je ne peux pas identifier ce qui fait que le code fonctionne correctement ou non, quels que soient l'ordre ou les clics, la taille de la fenêtre ou le navigateur.

Avez-vous une idée de la raison pour laquelle ce code s'exécuterait de manière aléatoire avec succès ?

//The following scales images proportionally to fit within the #slider div
$('#slider ul li img').each(function() {
    var maxWidth = $('#slider').outerWidth(false); // Max width for the image
    var maxHeight = $('#slider').outerHeight(false);    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
    ratio = maxWidth / width;   // Ratio for scaling image
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", height * ratio);  // Scale height based on ratio
    height = height * ratio;    // Reset height to match scaled image
}

var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if current height is larger than max
if(height > maxHeight){
    ratio = maxHeight / height; // Ratio for scaling image
    $(this).css("height", maxHeight);   // Set new height
    $(this).css("width", width * ratio);    // Scale width based on ratio
    width = width * ratio;    // Reset width to match scaled image
}
});
initialize(); //initializes the jCarousel Lite carousel

Answer 1

Avez-vous essayé de l'exécuter au chargement de la fenêtre jQuery(window).load(function() {

Cela permettra de garantir que toutes les images sont disponibles avant de vérifier leurs dimensions.