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;