Question

我一直在寻找这个和谷歌什么时候完全jQuery .load（）事件火（我当然是指图像的加载事件）？我并不是指加载图像的文档时的典型情况，我知道 - 加载事件会在我们发生时触发：

1 /将新的img附加到文档：

$('<img src="picture.jpg" />').appendTo('body');

2 /更改现有图片的src属性：

$('img').attr('src' , 'new_path.jpg');

3 /创建新的img对象：

var object = $('<img src="picture.jpg" />');

但是这些情况怎么样呢？因为我不确定：

4 /将图像附加到未添加到文档（DOM）的对象：

var o = $('<div></div>');
o.append('<img src="picture.jpg" />');

//我的意思是 o 在DOM树中不存在，它没有附加

5 /使用imgs将内容加载到未添加到文档中的对象：

var o = $('<div></div>');
o.load('url.html #pictures');

//我的意思是 o 在DOM树中不存在，它没有附加

我非常感谢你的帮助......

Answer 1

对于数字4，当它附加到内存中对象时它似乎只触发一次，并且当附加到DOM时它不再触发。看看这个小提琴：http://jsfiddle.net/JxHe4/并观看Chrome工具或Firebug中的网络流量和控制台输出。

Chrome，Firefox和IE9之间的行为似乎是一致的。现在这回答了你的问题的一部分（希望如此），但没有解释为什么这个问题。我的猜测是这是指定的方式（因为所有浏览器的行为都相似）但我找不到正式定义onLoad事件的规范。

对于5号，我不希望加载页面会影响图像的加载，我不知道如何首先获得对这些图像的引用以将.Load处理程序附加到它们。

<强> [UPDATE]

This excerpt from HTML4 specification可以解释第4点中的行为：嵌入式文档（在本例中为IMG）完全独立于嵌入文档的文档。例如，嵌入文档中的相对URI根据嵌入文档的基URI解析，而不是根据主文档的基URI。嵌入文档仅在另一个文档中呈现（例如，在子窗口中）;它保持独立。

Answer 2

以防

4 - 你可以将元素追加到var o，现在当你将var o追加到某个DOM时，它会附加包含img的div。

5 - 如果是o.load，在您的var o被转储到页面上之前，内容不会被加载。但是在控制台中不会出现相同的错误。

Answer 3

在大多数情况下，＃4应该触发加载事件（缓存图像可能存在一些问题），但＃5可能会也可能不会取决于绑定事件的位置和图像加载的速度。如果您将事件绑定在.load(url)之后的行上，则它将不会触发，因为图像尚不存在。如果将它置于.load调用的成功中，如果在绑定它之前没有触发它（竞争条件），它可能会触发。

什么时候jQuery加载事件火？

3 个答案: