检测多个图像加载事件答案

【问题标题】：Detect multiple images load event检测多个图像加载事件
【发布时间】：2013-04-06 00:39:17
【问题描述】：

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

例如，用户点击一个链接，就会出现带有 10 张图片的灯箱。加载完所有图片后，加载栏应该会消失。

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

不幸的是，这太早触发了hideLoadingBar();（在一张图片完成加载之后）。

附言
我还需要我的函数在图像被缓存后才能工作，所以：jQuery('#img1, #img2').load(); 将不起作用。

【问题讨论】：

看到这个stackoverflow.com/a/9624426/235710
@MohammadAdil 这正是图像已经缓存时不起作用的方法。而且我不能手动trigger('load')，因为那样会太早执行hideLoadingBar()。
如果我没记错 load 总是一个 ajax req，你有没有尝试进度回调？

标签： javascript jquery image load

【解决方案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();
        }
    });
});

适用于缓存图像而不是缓存图像。

【讨论】：

如果执行此函数时当前正在加载 10 个左右相当大的图像，那么此解决方案会发生什么情况。然后您将开始另外 10 次相同图像的下载，不是吗？也许您可以接受性能下降。
还要检查浏览器的怪癖documented on the plugin page。
@HannesJohansson 我不确定它是如何做到的，但我希望它不会加载它们两次。特别是如果它们已经被缓存。在我的情况下，图像不会很大，所以应该可以接受。
@HannesJohansson 我在 Apache 的访问日志中检查了这一点，即使我创建了 100 个该图像的实例，以不同的方式，在不同的点，Chrome 27 的每个页面刷新只有 1 个请求（缓存已禁用)。
@Paul 好的，我不知道所有浏览器是如何工作的。只是说需要小心，因为浏览器处理图像和缓存的方式不同，所以如果跨浏览器兼容性对您很重要，我建议您要小心。写这个插件的人想了想，这个插件并没有那么大，只是缩小了一千字节。

【解决方案2】：

看看这个jQuery imagesLoaded 插件，我认为它应该满足你的需求。

【讨论】：