如何知道特定“div”内的所有图像被加载？ [英] How to know when all images inside a specific "div" are loaded?

问题描述

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

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

最初， div 是隐藏的，我只在所有图像加载时显示它：

  $（window）.load（show_images_wrapper）; 
  

但是，如果我没有弄错， show_images_wrapper 才会被调用。只要 images_wrapper 中的所有图像已被加载，我就会立即调用 show_images_wrapper ，并且不要等到



我试过了：



  $（ #images_wrapper）负载（show_images_wrapper）。 
  

但没有用。



我应该怎么做？ 使用 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/

Part of my HTML page is the following div:

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

Initially, this div is hidden, and I show it only when all images are loaded:

$(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.

I tried:

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

but it didn't work.

How should I do this ?

解决方案

Set up a counter to the quantity of the images using the length^[docs] property, that is decremented as the images load.

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.

Of course the load()^[docs] method fires as each image finishes loading.

Example: 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.

This removes the need for the if/else statement.

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/

这篇关于如何知道特定“div”内的所有图像被加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！