javascript，如果加载相同的图像，图像 onload() 不会在 webkit 中触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5024111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript, image onload() doesnt fire in webkit if loading same image
提问by bogdan
I have an <img>element and I'm changing its srcattribute. The element has an onloadhandler function attached. Each time i change the src attribute and the image loads the handler function should run.
我有一个<img>元素，我正在更改它的src属性。该元素onload附加了一个处理程序函数。每次我更改 src 属性并且图像加载时，处理程序函数应该运行。
In Chrome and Safari, if I assign the same src as the one before, the handler function is not run. Before assigning that same src as before i've tried imgElement.src='', imgElement.src= null, imgElement.src='notExistingFile.jpg'and none of it works.
在 Chrome 和 Safari 中，如果我分配与之前相同的 src，则不会运行处理程序函数。在分配与之前相同的 src 之前，我尝试过imgElement.src='', imgElement.src= null，imgElement.src='notExistingFile.jpg'但都不起作用。
Please help. Anyone had this problem before?
请帮忙。以前有人遇到过这个问题吗？
Edit: it worked by doing imgElement.src = '' before assigning the same src as before:
编辑：它通过在分配与以前相同的 src 之前执行 imgElement.src = '' 来工作：
imgElement.src = '';
imgElement.src = 'image.jpg';
回答by Matt Ball
This is a known bug. Here's the workaround from that link:
这是一个已知的错误。这是该链接的解决方法：
This is not a bug. WebKit is just more strict. You must instantiate a new
Image()object before the replacement, like this:var photo = document.getElementById('image_id'); var img = new Image(); img.addEventListener('load', myFunction, false); img.src = 'http://newimgsource.jpg'; photo.src = img.src;
这不是错误。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;
回答by Delta
I think your problem here is just that you are assigning the onload event after you change the src value, so once the image has already been loaded to the cache, the browser load's it before the assignment of the event. Means that instead of doing this:
我认为您的问题只是在更改 src 值后分配 onload 事件，因此一旦图像已加载到缓存中，浏览器将在分配事件之前加载它。意味着，而不是这样做：
myImageObject.src = "something.png";
myImageObject.onload = myCallback;
do this:
做这个：
myImageObject.onload = myCallback;
myImageObject.src = "something.png";
回答by gr1
To add to Matt Ball's answer, consider img.onload instead of img.addEventListener().
要添加到 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 is easier to read and works better across user agents.
img.onload 更易于阅读，并且在用户代理之间运行得更好。
