Javascript 如何知道当所有图像都在一个特定的；分区；有货吗？

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

div

：

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

但是，如果我没有弄错的话，

show\u images\u wrapper

将仅在加载所有页面时调用。我希望

show\u images\u wrapper

在加载

images\u wrapper

中的所有图像后立即调用，不要等到加载所有页面

我试过：

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

但它不起作用

---

我应该怎么做？

使用属性设置图像数量的计数器，该计数器随着图像加载而递减

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

方法是从匹配集删除其

.complete

属性为

true

的图像。这意味着图像已经下载，可能已经被bhe浏览器缓存

当然，该方法在每个图像完成加载时激发

示例：

---

编辑：对其进行了更改，以便容器显示是否缓存了所有图像

---

编辑：

上面的另一个变体是将

.load（）

绑定到所有图像，并使用该方法获取

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

示例：

我写了一个可以做到这一点的程序

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

或者

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

images.load(function() { 

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

});

---

我会检查并查看图像是否在隐藏时由浏览器加载。我怀疑图像在实际渲染之前不会下载到您使用的浏览器中，但我可能错了。您可以使用网络选项卡中的firebug、chrome开发者工具或IE开发者工具来确定这一点。@Jared:嘿，我可以拿到的时候就拿了；o） @patrick我以前看过完整的属性，你有什么推荐的阅读材料吗？@alex:老实说，我从来没有找到太多关于它的文档。我曾经在MDC找到过一些东西，但现在我找不到了。据我所知，它完全支持浏览器（包括IE6）。@Misha你所说的方法具体指的是什么？如果您想亲自检查，可以在链接上找到代码。

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

images.load(function() { 

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

});