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

Question

I have an element and I\'m changing its src attribute. The element has an onload handler function attached. Each time i ch

Answer 1

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.

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

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