Javascript 如何处理img标签和其他标签上的onLoad事件

如何处理img标签上的

onLoad

事件

例如：

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

就像图像加载器一样

以及脚本、链接等其他标签。

---

对我来说似乎是可行的，应该通过缓存来解决这个问题。

有一个例子说明了如何在服务器上正确执行此操作

HTML:

而且，jQuery页面上也列出了一系列需要注意的注意事项

对于映像，如果希望确保调用加载处理程序，则必须先设置加载处理程序，然后才能加载映像。如果要在代码中构造映像，这意味着您必须在设置

.src

属性之前设置加载处理程序。这是因为，在某些浏览器中，如果映像位于内存/磁盘缓存中，则在分配

.src

时会立即加载映像，如果随后设置

.load（）

处理程序，则将太晚（映像将已加载），并且永远不会调用

.load（）

处理程序

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

jQuery有一个方法，而不是onload。您的代码应该是：

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

---

请@jfriend00阅读部分：与Images一起使用时加载事件的注意事项我已经阅读了注意事项。我不知道为什么它们听起来如此悲观，除非jQuery的实现有缺陷。我使用过加载事件（非jQuery，基于纯javascript）和从IE6开始的各种浏览器，代码中的图像在数千个站点上可靠地运行（代码中运行幻灯片，以便代码知道下一个图像何时加载并准备显示）。我从来没有遇到过问题。您必须确保事件尚未触发，但有一些方法可以检测/防止该事件。脚本和链接没有onload事件。

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

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

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