检测多张图片加载事件

Question

我想知道是否有一种方法可以检测多张图片的加载事件（特别是当给定集合中的最后一张图片完成加载时应执行函数）。

例如，用户点击链接，弹出一个包含10张图片的灯箱。当所有图片加载完成后，加载进度条应该消失。

jQuery(".lightbox-image").each(function(){
    var image = jQuery(this);
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        hideLoadingBar();
    });
});

不幸的是，这会在一个图像加载完成后立即触发 hideLoadingBar();。

P.S.
我也需要我的函数在图片被缓存后继续工作，所以 jQuery('#img1, #img2').load(); 不起作用。

- Atadj

---

请查看此链接 http://stackoverflow.com/a/9624426/235710 - Adil Shaikh

@MohammadAdil 当图像已经被缓存时，这正是不起作用的地方。我不能手动 trigger('load')，因为这会过早执行 hideLoadingBar()。 - Atadj

如果我没记错，加载始终是 AJAX 请求，你尝试过使用进度回调函数吗？ - steo

Answer 1

好的，看起来没有更好的想法了，因此以下是我的解决方案/解决方法。这个问题的另一个答案可能是你想要使用的，因为它是专门为此创建的库，但是这里是我要使用的解决方案，因为它更短且简单：

var allImages = jQuery(".lightbox-image").length;
var counter = 0;
jQuery(".lightbox-image").each(function(){
    var image = jQuery(this).find('.myimage');
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        counter++;
        if(counter >= allImages){
            hideLoadingBar();
        }
    });
});

适用于缓存和非缓存图片。

- Atadj

---

如果在执行此函数时有大约10个或更多正在加载的相当大的图像，那么这个解决方案会发生什么呢？然后，您将开始另外10个相同图像的下载，是吗？也许这种性能减慢对您来说是可以接受的。 - Hannes Johansson

还要检查浏览器的怪癖记录在插件页面上。 - Hannes Johansson

@HannesJohansson 我不确定它是如何做到的，但我希望它不会重复加载它们。特别是如果它们已经被缓存了。在我的情况下，图像不会很大，所以应该是可以接受的。 - Atadj

@HannesJohansson 我在Apache的访问日志中进行了检查，即使我以不同的方式，在不同的位置创建100个此图像的实例，Chrome 27（缓存已禁用）每次页面刷新只会发出1个请求。 - Atadj

@Paul，我不知道所有浏览器的工作原理。只是说需要小心，因为浏览器处理图像和缓存的方式不同，所以如果跨浏览器兼容性对你很重要，我建议你小心。编写插件的人认真考虑了这个问题，而且它并不是一个很大的插件，只有一千字节的压缩文件。 - Hannes Johansson

Answer 2

请查看这个jQuery imagesLoaded插件，我认为它可以满足你的需求。

- Hannes Johansson