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

Question

我的部分 HTML 页面如下div:

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

最初，这个div 是隐藏的，我只在所有图片都加载后才显示：

$(window).load(show_images_wrapper);

但是，如果我没记错的话，show_images_wrapper 只会在所有页面都加载完毕后才会被调用。我希望show_images_wrapper 在images_wrapper 中的所有图像都已加载后立即被调用，不要等到所有页面都加载完毕。

我试过了：

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

但是没有用。

我应该怎么做？

Answer 1

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

not()^[docs] 方法正在从匹配集中删除其.complete 属性为true 的图像。这意味着图像已经下载，并且可能被浏览器缓存。

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

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

---

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

---

编辑：

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

这消除了对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();

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

Answer 2

我写了一个jQuery plugin 可以做到这一点。

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

或者，

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

images.load(function() { 

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

});