jquery:如何监听一个容器div的图像加载事件？

Question

我有一个容器,里面有一些图像,我想听每个图像完成加载的事件.

例如)

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

我应该有4次"图像加载"事件.这该怎么做？

Answer 1

监听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中没有设置宽度并且.width属性的值为非零,那么必须加载图像,因为它是图像的加载,导致设置非零宽度值.

您的另一个选择是不将图像放入页面的HTML中并动态添加它们,您可以在分配.src属性之前创建图像时分配加载处理程序.

测试问题

为了进一步探讨这个问题,我在jsFiddle中构建了一个测试床:http://jsfiddle.net/jfriend00/7FjdJ/.它有四个图像,并报告当$(文档).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) {
        // this image already loaded
        // do whatever you would do when it was loaded
    } else {
        $(this).on('load', function() {
            // image now loaded
        });
    }
}); 

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

您将在演示中找到的是,如果您的浏览器缓存从未见过这个jsFiddle,那么如果将显示4个加载事件,但如果浏览器缓存已经看到这个jsFiddle,那么它将获得无加载事件,所有图像将已经在你的javascript运行时加载,它将看到它们被加载if (this.complete)到代码的分支中.