Цикл jQuery + Firefox, хлюпающий изображения

У меня была такая же проблема при работе над сайтом несколько месяцев назад (ссылка ниже). Если вы начинаете цикл в $ (document) .ready () , вот что происходит, когда клиент переходит на вашу страницу:

1) Браузер клиента отправляет запрос для каждого img элемент. Для выполнения этих запросов требуется разное количество времени.

2) Цикл начинается до завершения запросов изображений. Цикл работает, скрывая все, кроме первого изображения в слайд-шоу: он устанавливает visibility: hidden и display: none на каждом из своих изображений.

Проблема в том, что Firefox исправляет размер элемента img раз и навсегда в момент, когда для стиля отображения установлено значение «Нет» . Итак, если изображение не завершило загрузку, его атрибуты стиля высоты и ширины небольшие (я не уверен, что именно они соответствуют - возможно, размеру заполнителя изображения Firefox). Когда цикл показывает изображение, устанавливая его атрибут стиля на display: block , он использует те размеры, которые были у него на момент скрытия.

Я решил эту проблему, изменив свой код, чтобы он не отображался. запустите плагин цикла, пока все изображения не загрузятся. Для этого я инициализирую переменную счетчика количеством изображений, которые я просматриваю, затем привяжите событие загрузки к каждому изображению следующим образом:

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div

$(document).ready(function() {
    $('#slideshow > img').bind('load', function(e) {
        imagesRemaining = imagesRemaining - 1;
        if (imagesRemaining == 0) {
            // I'm doing some other stuff when initializing cycle
            startCycle();
            // My images all start with visibility:hidden so they don't show
            // before cycle hides them in a 'stack', so ...
            $('#slideshow > img').css('visibility', 'visible');
        }
    });
});

function onBefore(curr, next, opts) { // Your code here ... }

function startCycle() {
    $('#slideshow').cycle({ ... // your initialization here });
}

Вы можете увидеть его в действии, просмотрев галереи на этом сайте в Firefox. Я создаю страницы галереи динамически, поэтому она структурирована немного иначе, чем ваша страница, но вы можете увидеть больше деталей, если поработаете с Firebug.

Я также хотел бы добавить, что добавление атрибутов ширины и высоты решает эту проблему.

Если вы используете базу данных для заполнения слайд-шоу, вы можете попробовать получить доступ к размерам изображения из самого изображения.

Например, используя django, вы можете использовать

 width="{{ xxx.image.width }}px"  height="{{ xxx.image.height }}px" 

в теге img.