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/

编辑：更改了它，以便容器显示 all 图像是否恰好被缓存。

修改

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

这消除了对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.
    }

});

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

2 个答案: