Preload images for image swap

[nizuya]

My goal is to preload these images for an image swap on the page. It runs on body load but I'm not quite sure why it doesn't work...

function preload() {
	imageObj = new Image();
	images = new Array();
	images[0] = "images/globe2.jpg";
	images[1] = "images/stickme2.jpg";
	images[2] = "images/monitor2.jpg";
	images[3] = "images/mail2.jpg";
	images[4] = "images/hyperlink2.jpg";
	for(i = 0; i < 5; i++) {
		imageObj.src = images[i];
	}
}

[fxm]

I'm not quite sure why it doesn't work...

Here http://www.pageresource.com/jscript/jpreload.htm is a recipe that works.

[nizuya]

Thanks a lot fxm! I followed the tutorial and it ended up working great.

For anyone interested this is the code I used:

Javascript:

if (document.images) {
	globeOff = new Image();
	globeOff.src = "images/globe1.jpg";
	globeOn = new Image();
	globeOn.src = "images/globe2.jpg";
}
function turnOn(imgName) {
	if (document.images) {
		document[imgName].src = eval(imgName + "On.src");
	}
}
function turnOff(imgName) {
	if (document.images) {
		document[imgName].src = eval(imgName + "Off.src");
	}
}

HTML:

<a href="#" onMouseOver="turnOn('globe')" onMouseOut="turnOff('globe')">
	<img name="globe" src="images/globe1.jpg" />
	<br />Home
</a>

[fxm]

Thanks a lot fxm!

You're welcome.

document[imgName].src = eval(imgName + "On.src");
document[imgName].src = eval(imgName + "Off.src");

I'm sorry I didn't read all the way through that site.
The calls to eval() it recommends are pointless.

This

document[imgName].src = imgName + "On.src"
document[imgName].src = imgName + "Off.src"

will get the same result.

AAMOF now that I have looked at a range of tutorials on image pre-loading I can say that at best they are wretched [like the one I sent you to :( - sorry again] and at worst they are utterly wrong [like the one you started with].

When I get I few minutes I will post my version here as a snippet.