Pre-loading images - why when and how?
Firstly why would you pre-load images on your page?
My primary reason is normally because I want to use rollover images in my navigation. I want it to be a grey icon when there isn’t a mouse hovering over it and I want it to spring to life with colour when there is.
The downside of me wanting to do this is that my original grey image will load with the rest of the page but my mouseover images will only load when they are called (ie when the mouse hovers over them). If my images are not tiny, they may take a fraction of a second to load which could cause the user to think that my images are disappearing when they hover over them.
I want to pre-load my images once the rest of the work has gone on and the user has the ability to view and use my site.
The most simple way of doing this is as follows:
<script language=”JavaScript”>
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]=”image1.png”
images[1]=”image2.jpeg”
images[2]=”image3.gif”
images[3]=”image4.jpg”
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
