Painful IE6 event handling

If you want to preload images before displaying them in the browser, a convenient way to do so is to use image.onload.

For example, the following code shows the onload in action:

img = new Image();

var onloadFunc = function() {
    alert("got here... you really should do something now");
};

img.onload = onloadFunc;
img.src = url;
if (img.complete) {
    onloadFunc();
}

That works in most situations, but I’ve just discovered IE6 is seriously buggy (so what’s new?) in its onload event handling. The specific problem is preloading an image from the body’s onload event (or any other method that fires after the page has loaded, such as a script at the bottom of the page, etc).

A morning of googling failed to find a solution, so for future-me’s reference, basically the best way to ensure images are preloaded at the end of a pageload is something like the following:

var timer = null;
var images = new Array(); 

// trigger this from the body's onload
function onPageLoad() {
	images[0] = new Image();
	images[0].src = 'url to some image';
	images[1] = new Image();
	images[1].src = 'url to another image';
	timer = window.setInterval("onPageCheck()", 250);
} 

function onPageCheck() {
	for(var i = 0; i < images.length; i++) {
		if (!images[i].complete) {
			return;
		}
	}

	window.clearInterval(timer);
	images = null;

	// now use the images
	...
}

Basically, create an array of images (where the .src property triggers the preload), then use a timeout to check if the load is completed.

This appears to get around the problem. Note that the onload seems to work fine when triggered outside of the page onload (a button click and so on).