检测多个图像加载事件 [英] Detect multiple images load event

问题描述

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

I'm wondering if there is a way to detect load event of multiple images (particularly, a function should execute when the last image in a given set has completed loading).

例如，用户点击一个链接，lighbox出现10个图像。当所有图像都已加载时，加载栏应该消失。

For instance, an user clicks on a link and lighbox appears with 10 images. When all images have loaded, loading bar should disappear.

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

这很遗憾地触发 hideLoadingBar（）; 早期（在一张图片完成加载后）。

This unfortunately triggers hideLoadingBar(); too early (after one image has completed loading).

PS

我还需要我的功能才能在图像缓存后工作： jQuery（'＃img1，＃img2'）。load（）; 将无效。

推荐答案

查看这个 jQuery imagesLoaded 插件，它应该符合您的需求。

Check out this jQuery imagesLoaded plugin, it should suit your needs I think.

这篇关于检测多个图像加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！