如何知道何時加載特定“div”中的所有圖像?

[英]How to know when all images inside a specific “div” are loaded?


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


22  

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


8  

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.
    }

});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/06/27/ead8cae7ba00a929600dc6b0a768227.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com