Почему мой jQuery image изменяет изменение изменений с изменением изменений только с изменением размера образующегося изменения размера образующегося размера

Question

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

Я в настоящее время использую небольшую часть jQuery, чтобы пропорционально масштабировать набор изображений для отображения в изображении Carousel (благодаря таким пользователям для многих из них). Карусель питается плагином Jcarousel Lite ( здесь ). У меня есть 4 различных набора изображения, которые выбираются с использованием меню навигации. Когда выбран новый набор изображений, на каждом изображении в наборе выполняется следующий размер релиза jQuery, а затем карусель изображения инициализируется с помощью свежемоделие изображений в Diver.

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

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

//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() {

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