Почему мой код изменения размера jQuery работает только с перерывами?

Question

Первый пост. Я искал высокий и низкий для подобных вопросов и пришел с пустыми руками, так что вот так.

В настоящее время я использую небольшой бит jQuery для пропорционального масштабирования коллекции изображений для отображения в карусели изображения (благодаря SO пользователям большей части этого кода). Карусель питается плагином jCarousel Lite (here). У меня есть 4 разных набора изображений, которые выбираются с помощью меню навигации. Когда выбран новый набор изображений, на каждом изображении в наборе выполняется следующий код изменения jQuery, а затем карусель изображений инициализируется с использованием только что измененных изображений в #slider div.

Проблема: этот код работает только иногда, казалось бы, случайным образом. Когда слайдер инициализируется, если изображения не масштабируются успешно, все ширины увеличены до максимальной ширины, таким образом обрезая нижнюю часть изображения. Эта проблема особенно очевидна для портретно-ориентированных изображений, поскольку слайдер имеет форму для ландшафтно-ориентированных изображений (900 пикселей x 600 пикселей). Я не могу определить, что заставляет код работать успешно или нет, независимо от порядка или кликов, размера окна или браузера.

Любые идеи, почему этот код будет случайно выполнен успешно?

//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

Вы пробовали запустить его на окно нагрузки jQuery(window).load(function() {

Это поможет гарантировать, что все изображения доступны до проверки их размеров