Internet Explorer, Opera and JavaScript Image object "onload" Event

Old Content Warning

This post is very old (it was published 3 years ago), so I can't vouch for its content or accuracy. It may be here for posterity. Please take its content with a pinch of salt.

This is basically a post for the benefit of me and anyone else that is having trouble with Internet Explorer not executing the onload function when it's finished loading the image. This is a reiteration of this post on The Future of the Web.

The following code properly fires the onload function in all other browsers but internet explorer, which seems to only fire it the first time the image is actually downloaded - any versions of it pulled from the cache wont work - presumably because the image has finished loading before the onload event is attached to it.

var Img = new Image();
Img.src = '/images/image.png';
Img.onload = function(){
	alert('Loaded!');
}

So the way to fix this is to define the onload function before the source path:

var Img = new Image();
Img.onload = function(){
	alert('Loaded!');
}
Img.src = '/images/image.png';

Thus setting up the event before sending the browser off to get the image. This is a pretty un-obvious solution, but one that is not completely devoid of logic.

I've found this error to run right to IE9 beta, so it's clearly not going to be changed.