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

Question

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

20

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

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

一开始这个 div 是隐藏的，只有当所有图片加载完毕时才会显示：

$(window).load(show_images_wrapper);

然而，如果我没记错的话，show_images_wrapper 仅在整个页面加载完后才会被调用。我希望在所有图片都加载完成后立即调用 show_images_wrapper ，而不是等到整个页面加载完成。

我尝试过：

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

但是它没有起作用。

我该怎么做？

- Misha Moroshko

我会检查并确认当图像被隐藏时，它们是否实际被浏览器加载。我怀疑在图像被渲染之前，它们可能没有被下载到你正在使用的浏览器中，但我也可能错了。你可以使用Firebug、Chrome开发者工具或IE开发者工具中的网络选项卡来确定这一点。 - MoarCodePlz

2个回答

11

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

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

或者，

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

images.load(function() { 

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

});

- alex

1

@Misha，您特别指的是他的方法的哪个部分？如果您想自己检查代码，可以在链接中找到它。 - alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

使用length^[文档]属性设置一个计数器来跟踪图片数量，随着图片加载，递减计数器。

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/