Question

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

示例：

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

就像imageLoader

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

Answer 1

jQuery callback on image load (even when the image is cached)

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

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

Answer 2

有一个如何在jQuery doc page for .load()上执行此操作的示例。

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);
})

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

3 个答案: