如何知道何时加载特定“div”中的所有图像？

Part of my HTML page is the following div:

我的HTML页面的一部分是以下div：

<div id="images_wrapper">
  <img ... />
  <img ... />
  <img ... />
  ...
</div>

Initially, this div is hidden, and I show it only when all images are loaded:

最初，这个div是隐藏的，我只在加载所有图像时显示它：

$(window).load(show_images_wrapper);

However, if I'm not mistaken, show_images_wrapper will be called only when all the page is loaded. I would like show_images_wrapper to be called as soon as all images inside images_wrapper has been loaded, and don't wait until all the page is loaded.

但是，如果我没有弄错，只有在加载所有页面时才会调用show_images_wrapper。我希望show_images_wrapper一旦加载了images_wrapper中的所有图像就被调用，并且不要等到所有页面都被加载。

I tried:

我试过了：

$("#images_wrapper").load(show_images_wrapper);

but it didn't work.

但它不起作用。

How should I do this ?

我该怎么做？

2 个解决方案

#1

Set up a counter to the quantity of the images using the length^[docs] property, that is decremented as the images load.

使用length [docs]属性设置计数器的数量，该属性在图像加载时递减。

var imgs = $("#images_wrapper > img").not(function() { return this.complete; });
var count = imgs.length;

if (count) {
    imgs.load(function() {
        count--;
        if (!count) {
            $("#images_wrapper").show();
            alert('all done');
        }
    });
} else {
    $("#images_wrapper").show();
}

The the not()^[docs] method is removing from the matched set the images where their .complete property is true. This means the image has already downloaded, and was perhaps cached by bhe browser.

not（）[docs]方法是从匹配的集合中删除其.complete属性为true的图像。这意味着图像已经下载，可能是由浏览器缓存的。

Of course the load()^[docs] method fires as each image finishes loading.

当然，load（）[docs]方法会在每个图像完成加载时触发。

Example: http://jsfiddle.net/uhmAR/1/

示例：http：//jsfiddle.net/uhmAR/1/

EDIT: Changed it so that the container will show if all the images happened to be cached.

编辑：更改它，以便容器将显示是否所有图像都被缓存。

EDIT:

编辑：

Another variation on the above is to bind the .load() to all the images, and use the filter()^[docs] method to get the ones that are .complete, and just manually invoke the .load() on them.

上面的另一个变体是将.load（）绑定到所有图像，并使用filter（）[docs]方法获取.complete，然后手动调用它们上的.load（）。

This removes the need for the if/else statement.

这消除了对if / else语句的需要。

var imgs = $("#images_wrapper > img")
var count = imgs.length;

imgs.load(function() {
    count--;
    if (!count) {
        $("#images_wrapper").show();
        alert('all done');
    }
}).filter(function() { return this.complete; }).load();

Example: http://jsfiddle.net/uhmAR/3/

示例：http：//jsfiddle.net/uhmAR/3/

#2

I wrote a jQuery plugin that can do this.

我写了一个jQuery插件，可以做到这一点。

$('#images_wrapper').waitForImages(function() {
   // Done.
});

Alternatively,

或者，

var images = $('#images_wrapper img'),
    imagesLength = images.length;

images.load(function() { 

    if ( ! --imagesLength) {
        // Done.
    }

});

#1