Preload images

[Lotus]

How do I get my page to preload my images? I have a rollover script on my page. I have some regular button images and then some button images that are displayed when you move the mouse over that button. But only the regular images are loaded; when i mouse over each button the first time the image for that button need to be uploaded at THAT moment (but after the first time it works fine). I want the images to be pre-loaded, but how on earth do I program this?

Check my page (it's Norwegian, but of course the code isn't) at home.no.net/xmedia and try to move the mouse over yourself and you know what I mean.

I appreciate any input here. Plz help me out.

[DaveSW]

Well the first thing is compression. You may wish to reduce the size of the images.

Other than that, do you prefer a css or javascript solution?

CSS is easy. just insert the rollover image at the bottom of the page:
<img src="something.jpg" width="100px" height="20px;" ... style="display:none;" />

The image is then downloaded to the cache, and is called from the cache to give a fast rollover.

[Khalid Ali]

if(document.images){
var myImage = new Image();
myImage.src = "myimage.gif"
}

the above will preload the image

[DaveSW]

and that's the javascript solution lol.

We must have pushed the post button at the same time- my page loaded with both posts!

[Lotus]

I want to load several images, so you just do like below, for example?

if(document.images){
var myImage = new Image();
myImage.src = "myimage1.gif"
}
if(document.images){
var myImage = new Image();
myImage.src = "myimage2.gif"
}
if(document.images){
var myImage = new Image();
myImage.src = "myimage3.gif"
}

And where in the document should the code be located?

[Khalid Ali]

In that cas eyou will need a unique image name
myImage 1
myImage 2
....etc