jquery：如何听一个容器div的图像加载事件？ [英] jquery: how to listen to the image loaded event of one container div?

问题描述

eg）

$ b $我有一个容器里面有一些图像，我想听每个图像加载的事件。 b

 < div id =container> 
< img src =.../> 
< img src =.../> 
< img src =.../> 
< img src =.../> 
< / div> 
  

我应该得到4次图片加载事件。
如何做到这一点？

解决方案

聆听图像加载事件的唯一可靠方法是HTML源代码将在HTML中指定一个onload处理程序：

 < div id =container> 
< img onload =imageLoad（）src =.../> 
< img onload =imageLoad（）src =.../> 
< img onload =imageLoad（）src =.../> 
< img onload =imageLoad（）src =.../> 
< / div> 
  

这是因为您无法将事件处理程序附加到页面HTML中的图像，直到图像标记为止加载它们自己（所以它们存在于DOM中）。一旦加载了这些图片标签，图片的源代码就已经被加载了，如果它很快可用（比如在浏览器缓存中），它可能会在加载事件处理程序之前被加载。因此，至多你不能确定它会起作用，最坏的情况下，它不会起作用。无论如何，它可能并不可靠。

或者，如果您只想知道何时在页面中加载了所有图像，则可以使用整个文档。在jQuery中，您可以使用 $（window）.load（fn）。

来做到这一点，或者，您可以附加加载事件，然后检查是否有任何图像已经加载，并将这些加载计数。我不确定是否有官方的标准方法来查看图像是否已经加载，但我发现如果在HTML中没有设置宽度，并且<$ c $有一个非零值c> .width 属性，那么图像必须被加载，因为它是图像的加载，导致设置非零宽度值。

另一种选择是不将图像放入页面的HTML中并动态添加它们，并且在分配 .src 属性。

---

测试问题

这一点，我在jsFiddle建了一个测试床： http://jsfiddle.net/jfriend00/7FjdJ/ 。它有四个图像，并报告当$（document）.ready（）激发并报告有多少图像触发 .load（）事件时已加载了多少图像。结果显示，从一个浏览器到另一个浏览器的行为有所不同。

在Chrome 15中，如果图像已经在缓存中，我将得到空载事件，已在 $（document）.ready（）触发时加载。这种行为似乎取决于图片后页面中有多少内容。

在Safari 5中，我第一次加载页面时，会报告4次加载事件，已​​经加载0个图像。第二次加载页面时，它报告0个加载事件，4个图像已经加载。

在IE9中，图像始终显示为已加载，并且没有加载事件触发，无论是否缓存。

在Firefox 7中，第一次加载页面时，我得到0个加载事件和4个已加载的图像。下一次我加载页面时，我得到了4个加载事件和4个图像已经加载。

另外，由于这是一个时间问题，如果我不想这种行为取决于图像的大小和加载速度，因为缓慢加载的图像可能导致加载事件触发得太晚而无法看到。它也可能取决于在图像之后要在页面中加载多少内容（例如，可以在document.ready之前完成多少工作）。

因此，我的结论是，在图像开始加载之后安装的 .load（）事件处理程序的行为在浏览器与下一个浏览器之间并不一致到下一个，因此如果没有其他代码来缓解这些差异（检查图像是否已经加载），您就不能指望它。

---

还有另一种方法。您可以在DOM加载后安装事件处理程序，并且在安装事件处理程序时，您可以检查图像是否已加载。以下是一种方法：

 < div id =container> 
< img src =.../> 
< img src =.../> 
< img src =.../> 
< img src =.../> 
< / div> 
 
< script> 
 $（＃container img）。each（function（）{
 if（this.complete）{
 //这张图片已经加载
 //做任何你想做的事（）函数（）{
 //图片现在加载
}）; 
} 
}）; 
  

工作演示： http://jsfiddle.net/jfriend00/6Cq4y/

在演示中你会发现，如果你的浏览器缓存从未见过这个jsFiddle，那么如果将显示4个加载事件，但是如果浏览器缓存已经看到了这个jsFiddle，那么它将得到没有加载事件和所有图像将在您的JavaScript运行时加载，并且它会看到它们已加载到代码的 if（this.complete）分支中。

I have a container that has some images inside, I want to listen to the event of every image finish loaded.

eg)

<div id="container">
     <img src="..." />
     <img src="..." />
     <img src="..." />
     <img src="..." />
</div>

I should got 4 times of the "image loaded" event. How to do this?

解决方案

The only reliable way to listen to the load events of images that are in your HTML source is to specify an onload handler in the HTML:

<div id="container">
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
</div>

This is because you can't attach event handlers to images in your page HTML until the image tags are loaded themselves (so they are present in the DOM). Once those images tags are loaded, the source of the image is already being loaded and, if it's available quickly (like in the browser cache), it might get loaded before you can attach the event handler. Thus, at best you can't be sure it will work and at worst, it won't work. In any case, it may not be reliable.

Or, if you just want to know when all images are loaded in the page, you can use the load event for the whole document. In jQuery, you can do that with $(window).load(fn).

Or, you can attach the load events and then check to see if any of the images are already loaded and count those as loaded. I'm not sure if there's an official standard way to see if an image is already loaded or not, but I have found that if there is no width set in the HTML and there is a non-zero value for the .width attribute, then the image must be loaded because it's the loading of the image that causes the non-zero width value to get set.

Your other option is to not put the images into the HTML of your page and add them dynamically and you can assign load handlers when you create the images before you assign the .src attribute.

---

Testing the Issue

To explore this a little further, I built a test bed in jsFiddle: http://jsfiddle.net/jfriend00/7FjdJ/. It has four images in it and reports how many images are already loaded when $(document).ready() fires and reports how many images fire the .load() event. The results show a variation in behavior from one browser to the next.

In Chrome 15, if the images are already in the cache, I get no load events and all four are already loaded when $(document).ready() fires. The behavior appears to vary depending upon how much content there is in the page after the images.

In Safari 5, the first time I load the page, it reports 4 load events, 0 images already loaded. The second time I load the page, it reports 0 load events, 4 images already loaded.

In IE9, the images always appear to already be loaded and no load events fire, whether cached or not.

In Firefox 7, the first time I load the page, I get 0 load events and 4 images already loaded. The next time I load the page, I get 4 load events and 4 images already loaded.

Also, since this is a timing issue, it wouldn't surprise me if the behavior depends upon the size of the images and speed of loading them as slow loading images could cause load events to fire late enough to be seen. It may also depend upon how much content there is to load in the page after the images (e.g. how much work is to be done before document.ready can be fired).

So, my conclusion is that the behavior of the .load() event handler when installed after the image has started loading is inconsistent from one browser to the next and from one situation to the next, thus you cannot count on it without other code to mitigate those differences (checking to see if the images are already loaded).

---

There is another approach. You can install the event handlers after the DOM has loaded and when installing the event handler, you can check if the image is already loaded. Here's one way to do that:

<div id="container">
     <img src="..." />
     <img src="..." />
     <img src="..." />
     <img src="..." />
</div>

<script>
$("#container img").each(function() {
    if (this.complete) {
        // this image already loaded
        // do whatever you would do when it was loaded
    } else {
        $(this).load(function() {
            // image now loaded
        });
    }
}); 

Working demo: http://jsfiddle.net/jfriend00/6Cq4y/

What you will find in the demo is that if your browser cache has never seen this jsFiddle, then if will show 4 load events, but if the browser cache has already seen this jsFiddle, then it will get no load events and all the images will already be loaded by the time your javascript runs and it will see they are loaded in the if (this.complete) branch of the code.

这篇关于jquery：如何听一个容器div的图像加载事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！