Question

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

例如，用户点击链接，并且lighbox会显示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();无法工作。

Answer 1

查看此jQuery imagesLoaded插件，我认为它应该符合您的需求。

Answer 2

好吧，似乎没有人有更好的想法，所以下面是我的解决方案/解决方法。这个问题的另一个答案可能是您想要使用的，因为它是专门为此创建的库，但这是我将要使用的解决方案，因为它更简单：

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();
        }
    });
});

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

检测多个图像加载事件

2 个答案: