Image preloading
The way a browser normally works, images are loaded only after an HTTP request is sent for them, either passively via an <img> tag or actively through a method call. So if you have JavaScript that swaps an image on mouseover, or changes an image automatically after a timeout, you can expect to wait anywhere from a few seconds to a few minutes while the image is retrieved from the server. This is especially noticeable if you have a slow connection to the Internet, or if the images being retrieved are very large...and the delay usually ruins the effect you were hoping for.
Some browsers try to mitigate this problem by storing the images in the local cache so that subsequent calls to the image are satisfied immediately...but there's still a delay the very first time the image is needed. Preloading is a technique where the image is downloaded to the cache before it's needed. That way when the image is really needed it can be retrieved from the cache and displayed immediately.
The Image() object
The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass it the URL of the image you want preloaded. Say we have an image called heavyimagefile.jpg, which we want to display when the user mouses over an already-displayed image. In order to preload this image for faster response time, we simply create a new Image() object, called heavyImage, and load it simultaneously to the page with the onLoad() event handler:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#"
onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Note that the image tag does not itself handle onMouseOver() and onMouseOut() events, which is why the <img> tag in the example above has been enclosed in an <a> tag, which does include support for those event types.
Loading multiple images with arrays
In practice, you will probably need to preload more than just one image; for example, in a menu bar containing multiple image rollovers, or if you're trying to create a smooth animation effect. This is not difficult; all you need to do is make use of JavaScript's arrays, as in the example below:
<script language="JavaScript">
function preloader()
{
Ã, Ã, Ã, Ã, // counter
Ã, Ã, Ã, Ã, var i = 0;
Ã, Ã, Ã, Ã, // create object
Ã, Ã, Ã, Ã, imageObj = new Image();
Ã, Ã, Ã, Ã, // set image list
Ã, Ã, Ã, Ã, images = new Array();
Ã, Ã, Ã, Ã, images[0]="image1.jpg"
Ã, Ã, Ã, Ã, images[1]="image2.jpg"
Ã, Ã, Ã, Ã, images[2]="image3.jpg"
Ã, Ã, Ã, Ã, images[3]="image4.jpg"
Ã, Ã, Ã, Ã, // start preloading
Ã, Ã, Ã, Ã, for(i=0; i<=3; i++)
Ã, Ã, Ã, Ã, {
Ã, Ã, Ã, Ã, Ã, Ã, Ã, Ã, Ã, imageObj.src=images[i];
Ã, Ã, Ã, Ã, }
}
</script>
In the above example, you define a variable i and an Image() object cleverly named imageObj. You then define a new array called images[], where each array element stores the source of the image to be preloaded. Finally, you create a for() loop to cycle through the array and assign each one of them to the Image() object, thus preloading it into the cache.
Do you need help? 
Leave a comment