6

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

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

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

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

PS
我还需要我的功能在图像被缓存后才能工作，所以：jQuery('#img1, #img2').load();不会工作。

4

2 回答 2

2

查看这个jQuery imagesLoaded插件，我认为它应该适合您的需求。

于 2013-04-13T15:36:37.717 回答
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();
        }
    });
});

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

于 2013-04-13T15:57:44.850 回答