图像的.onload事件未触发

Question

我正在尝试加载一个临时的图片标签。一旦该标签完成图像加载，我将设置img#main的'src'为“临时”图像元素的'src'。问题是，临时图像成功加载（在屏幕上显示），但onload处理程序似乎没有触发。我从未收到“图像加载完成”的消息。我不明白为什么临时图像可以显示在页面上，但不触发其onload处理程序（如果浏览器使用缓存版本的图像会发生这种情况吗？但是，我很确定我已经清除了缓存）。顺便说一句，我也尝试过类似B）的代码。但那似乎也不起作用。此外，我正在使用Aptana Studio并将我的页面加载到本地WAMP服务器中。我不知道这是否有任何区别。另外，我分配给'src'的URL是文档相对的（例如：“images/image_1.jpg”）。

B)

我正在尝试加载一个临时的图片标签。一旦该标签完成图像加载，我将设置img#main的'src'为“临时”图像元素的'src'。问题是，临时图像成功加载（在屏幕上显示），但onload处理程序似乎没有触发。我从未收到“图像加载完成”的消息。我不明白为什么临时图像可以显示在页面上，但不触发其onload处理程序（如果浏览器使用缓存版本的图像会发生这种情况吗？但是，我很确定我已经清除了缓存）。顺便说一句，我也尝试过类似B）的代码。但那似乎也不起作用。此外，我正在使用Aptana Studio并将我的页面加载到本地WAMP服务器中。我不知道这是否有任何区别。另外，我分配给'src'的URL是文档相对的（例如：“images/image_1.jpg”）。

$('img#temp').load = function(){
  mch.say('Image is done loading');
}
$('img#temp').attr('src', url);
$('img#main').attr('src', url);

B）

var tempImage = new Image();
tempImage.src = url;
tempImage.onload = function(e){
mch.say("Image is done loading");
}

- user3538389

---

你能放上更大一部分的代码吗？我不知道mch是什么。我也想看看HTML部分。 - Zaenille

抱歉回复晚了，我离开电脑了。mch.say()只是一个方法，用于将内容输出到我的浏览器窗口。至于我的代码片段，我会尽快提供更连贯的内容。 - user3538389

Answer 1

A&B 中都有两个错误。

A) 如果您使用jquery，$('img#temp').load 应该改为 $('#temp').on('load')。

B) 您应该在分配src之前，先分配onload事件。

- RienNeVaPlu͢s

---

我相信如果我没有记错的话，jquery会使用.load()函数。你关于源代码顺序的说法是正确的。我在问题中只是打错了字。 - user3538389

@user3538389 .load() 是 jQuery 用来从服务器 加载数据 的方法，但如果你想要捕获 onload 事件，可以使用 on('load') 方法（已编辑答案）。这里有一个 fiddle。 - RienNeVaPlu͢s

哦，对了。我以为load()是.on("load", handler)的快捷函数。愚蠢的错误。 - user3538389

这里的B点帮助我解决了一个类似的问题，即图片被缓存后，有时候在onload事件被设置之前，图片已经被完全加载，从而导致我想要在每个图片的onload事件回调中执行的处理不会对某些图片执行。谢谢。 - HartleySan