javascript - 加载多个图像后按顺序加载它们

Question

我有四个不同大小的图像。我希望它们按特定顺序加载。如果我使用负载处理程序，它们只会在加载后出现，而不是按顺序显示。但是如果我按顺序将它们设置为 .fadeIn() ，那么它们不一定会被加载。

有任何想法吗？这是我到目前为止所得到的：

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

我让 z2 和 z4 同时淡入，因为 z2 比 z4 大，然后我在 z4 加载后将 z1 设置为 fadeIn，因为 z4 更大。

我在想我可能必须设置一些全局变量，这样一旦满足变量，图片就会淡入，并且变量将由加载函数设置。任何其他想法都会很棒，这样我就不会在这上面浪费太多时间。

Answer 1

与其调用 fadein 的加载函数，不如让它跟踪已加载的图像数量。将 var 设置为 0。每次加载其中一个图像时，递增 var。当 var 达到 4 时，安排淡入淡出。

玩延迟很好，但网络故障可能会导致“小”图像在“大”图像之后很长时间加载。