如果加载相同的图像，javascript，image onload（）在webkit中不会触发

Question

我有一个<img>元素，我正在更改其src属性。该元素附加了onload处理函数。每次我更改src属性和图像加载时，应该运行处理函数。

在Chrome和Safari中，如果我分配与之前相同的src，则不会运行处理程序功能。在分配与之前相同的src之前，我已经尝试过imgElement.src=''，imgElement.src= null，imgElement.src='notExistingFile.jpg'，而且没有任何效果。

请帮忙。以前有人遇到过这个问题吗？

编辑：在分配与以前相同的src之前，通过执行imgElement.src =''工作：

imgElement.src = '';
imgElement.src = 'image.jpg';

Answer 1

这是known bug。以下是该链接的解决方法：

  

这不是错误。 WebKit就是更多   严格。您必须实例化一个新的   替换之前的Image()对象，   像这样：

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Answer 2

我认为你的问题只是你在更改src值后分配onload事件，所以一旦图像已经加载到缓存中，浏览器就会在事件分配之前加载它。意味着不是这样做：

myImageObject.src = "something.png";
myImageObject.onload = myCallback;

这样做：

myImageObject.onload = myCallback;
myImageObject.src = "something.png";

Answer 3

要添加到Matt Ball的答案，请考虑使用img.onload而不是img.addEventListener（）。

var photo = document.getElementById('image_id');
var img = new Image();
img.onload = myFunction;
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

img.onload更易于阅读，并且可以在用户代理之间更好地工作。