6

我一直在这里和谷歌中寻找 jQuery .load() 事件何时触发（当然我的意思是图像的加载事件）？我并不是指加载带有图像的文档时的典型情况，我所知道的 - 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 树中不存在，它没有附加

我将非常感谢您的帮助...

4

3 回答 3

2

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

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

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

[更新]

HTML4 规范的这段摘录可以解释第 4 点中的行为：嵌入式文档（在这种情况下为 IMG）完全独立于它所嵌入的文档。例如，嵌入文档中的相对 URI 根据嵌入文档的基本 URI 而不是主文档的基本 URI 进行解析。嵌入文档仅在另一个文档中呈现（例如，在子窗口中）；它在其他方面保持独立。

于 2012-10-16T14:35:37.930 回答
0

如果

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

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

于 2012-10-16T14:36:28.320 回答
0

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

于 2012-10-16T14:50:54.253 回答