如何处理 img 标签等上的 onLoad 事件

Question

如何处理img标签上的onLoad事件？

示例：

$ ('img'). onload (function (e) {
   alert ('image loaded' + $ (this), attr ('src'));
})

就像 imageLoader

和其他标签，如脚本、链接等...

Answer 1

图像加载时的 jQuery 回调（即使图像已缓存）

$("img").one('load', function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

似乎对我有用，并且应该修复缓存的警告。

Answer 2

.load() 的 jQuery 文档页面 上有一个如何正确执行此操作的示例。

HTML：

<img src="book.png" alt="Book" id="book" />

Javascript：

$('#book').load(function() {
  // Handler for .load() called.
});

并且，该 jQuery 页面上也列出了许多需要注意的警告。

对于图像，如果您想确保调用加载处理程序，则必须在加载图像之前设置加载处理程序。如果您在代码中构建图像，这意味着您必须在设置 .src 属性之前设置加载处理程序。这是因为，在某些浏览器中，如果图像位于内存/磁盘缓存中，则当您分配 .src 并且随后设置 .load() 处理程序，你就来不及了（图像已经加载）并且 .load() 处理程序将永远不会被调用。

我不知道如何保证基于 jQuery 的 .load() 始终会被调用用于页面 HTML 中的图像，因为在对象存在之前您无法分配事件处理程序，但是一旦对象存在，它就会可能已经加载。您可以在实际 HTML 中使用 onload=xxx 的非 jQuery 设置，尽管这是一种较旧的编码风格。当然，您始终可以挂钩 window.onload 来了解所有页面图像（和其他资源）何时已加载。

Answer 3

jQuery 有一个 load 方法，而不是 onload。你的代码可能应该是：

$ ('img').load(function () {
   alert('image loaded ' + this.src);
})