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

Question

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

Есть идеи?Вот что у меня получилось:

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

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

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

Answer 1

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

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