I have an <img> element and I'm changing its src attribute. The element has an onload handler function attached. Each time i change the src attribute and the image loads the handler function should run.

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.

Please help. Anyone had this problem before?

Edit: it worked by doing imgElement.src = '' before assigning the same src as before:

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

I have an <img> element and I'm changing its src attribute. The element has an onload handler function attached. Each time i change the src attribute and the image loads the handler function should run.

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.

Please help. Anyone had this problem before?

Edit: it worked by doing imgElement.src = '' before assigning the same src as before:

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

• javascript
• image
• webkit
• onload

• 2 +1 for the simpler imgElement.src = '' solution. This unloaded the image properly and allowed onload() to fire again. – ricosrealm Commented Mar 20, 2012 at 7:40
• WebKit bug: bugs.webkit.org/show_bug.cgi?id=9582 – ZachB Commented Jul 31, 2020 at 0:06
• looks like the bug is fixed in Safari 15 – Vladislav Lobakh Commented Dec 29, 2022 at 12:52

3 Answers 3

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;

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:

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

do this:

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

To add to Matt Ball's answer, consider img.onload instead of 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.