javascript, image onload() doesnt fire in webkit if loading same image

Question

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';

Answer 1

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;

Answer 2

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";