Загрузите несколько изображений по порядку после их загрузки

У меня есть четыре изображения разного размера. Я хочу, чтобы они загружались в определенной последовательности. Если я использую обработчик загрузки, они появятся сразу после загрузки и не обязательно по порядку. Но если я установлю их в .fadeIn() по порядку, то они не обязательно будут загружены.

Любые идеи? Вот что у меня есть:

$('.z2').load(function(){
    $(this).fadeIn(600);
    $('.z4').delay(300).fadeIn(1900, function(){
        $('.z1').fadeIn(3250);                                  
                        });
                       });

Я позволяю z2 и z4 исчезать одновременно, потому что z2 больше, чем z4, а затем я устанавливаю z1 в режим fadeIn после загрузки z4, потому что z4 больше.

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


javascript image jquery sequence load-time
person bozdoz    schedule 29.01.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо функции загрузки, вызывающей затухание, пусть она отслеживает, сколько изображений было загружено. Установите переменную на 0. Каждый раз, когда загружается одно из этих изображений, увеличивайте переменную. Когда var достигает 4, ТОГДА запланируйте постепенное исчезновение.

Игра с задержками — это нормально, но сбой сети может привести к тому, что «маленькое» изображение будет загружаться намного позже «большого».

person Marc B    schedule 29.01.2011
comment
Очень хочется, чтобы они появлялись по мере загрузки, но по порядку. Выполнение того, что вы предлагаете, будет означать, что время загрузки будет самым длинным из возможных, ожидая всех изображений, прежде чем они будут показаны. - person bozdoz; 01.02.2011
comment
Ах. истинный. Но в любом случае вам придется не допускать, чтобы более поздние изображения отображались перед одним из более ранних, а это означает, что вам нужно будет вести клиентский список того, что было загружено. Если изображение № 2 заканчивается раньше № 1, то не отображайте его, пока не завершится № 1 и т. д. - person Marc B; 01.02.2011