15

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';
bogdan
  • 1,269
  • 3
  • 12
  • 18

3 Answers3

17

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;
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 1
    silly me...it also worked by doing imgElement.src = '' before assigning the same src as before...i overlooked i had two places where i had to to that – bogdan Feb 17 '11 at 01:59
3

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";
Delta
  • 4,308
  • 2
  • 29
  • 37
  • Had this problem in IE and indeed i was assigning the src first...did what you said and it fixed it...thanks! – bogdan Jun 26 '11 at 10:30
-2

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.

gr1
  • 9
  • 3