所有动态图像完成加载时的Jquery警报

Question

我使用一个函数通过ajax调用将图像动态加载到div。我需要在图像开始加载时显示加载的gif图像，并在所有图像完成加载时隐藏。我的主要任务是知道所有图像何时完成加载。

这是我的代码

 $('img').on('load', function ()
 {
alert("image loaded: "+this.src);
 });

但是，此警报会继续调用每个图像。

请记住，在加载页面后，图像是通过ajax调用加载的。

Answer 1

您可以统计屏幕上的所有$（＆＃39; img＆＃39;），并在每次加载图片时增加变量。一旦计数与图像数量相同，就会调用您的警报。

Answer 2

这样做，

function loadAllImagesFromArray(images){
     for(i = 0 ; i < images.length; i++){
        var imageUrl = images[i];
        // closure to make sure that the value of i is preserved inside the context
        (function(i){
           $.ajax({
             url: imageUrl,
           }).done(function(image) {
             if(i == images.length - 1)
              alert("Image loaded");
           });
        }(i));
      }
    }