Javascript 检测多个图像加载事件

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

例如，一个用户点击一个链接，lighbox就会显示10幅图像。加载所有图像后，加载栏应消失

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

jQuery（“.lightbox image”）。每个（函数（）{
var image=jQuery（this）；
jQuery（'
不幸的是，这会过早地触发
hideLoadingBar（）；
（在一个图像完成加载之后）

附加说明

我还需要我的函数在缓存图像后工作，所以：
jQuery（'#img1，#img2'）.load（）
不起作用。
看看这个插件，我认为它应该适合你的需要。
好吧，似乎没有人有更好的想法，所以下面是我的解决方案/变通方法。这个问题的另一个答案可能是你想要使用的，因为它是专门为此创建的库，但这里是我要使用的解决方案，因为它是它简短而简单：

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

var allImages=jQuery（“.lightbox image”）.length；
var计数器=0；
jQuery（“.lightbox图像”）.each（函数（）{
var image=jQuery（this.find）（'.myimage'）；
jQuery（'=allImages）{
hideLoadingBar（）；
}
});
});

适用于缓存图像和非缓存图像。
请看这个@MohammadAdil这正是图像已缓存时不起作用的地方。我无法手动
触发（'load'）
，因为这将执行
hideLoadingBar（）
太早了。如果我没记错的话，加载总是一个ajax请求，您是否尝试了进度回调？如果在执行此函数时，您当前正在加载10个左右相当大的图像，那么此解决方案会发生什么情况。然后，您将开始再次下载10个相同的图像，不是吗？也许性能下降是可以接受的谢谢。还要检查浏览器的怪癖。@HannesJohansson我不确定它是如何做到的，但我希望它不会加载两次。特别是如果它们已经被缓存。在我的情况下，图像不会很大，所以应该可以接受。@HannesJohansson我在Apache的访问日志中检查了这一点，即使我以不同的方式创建了100个该图像的实例另外，在不同的点上，Chrome 27每页只有1个刷新请求（缓存禁用）@Paul Ok，我不知道所有的浏览器到底是如何工作的。只是说一个浏览器需要小心，因为浏览器处理图像和缓存的方式不同，所以如果跨浏览器兼容性对你来说很重要，我建议你小心。编写插件的人仔细考虑了这一点，插件没有那么大，只是缩小了一个千字节。