JavaScript: Preloading Images
Preloading images is a technique often used in Rollover Effects or other image scripts which work more quickly when the images for them are loaded as soon as possible.
What javascript does is allow you to start loading the images in the HEAD section of your page, which means that with this technique (unless the images are large or great in number) your viewers will have the necessary images in their browser's cache before the script starts to run. This way, an image rollover will be less likely to make the viewers wait for the browser to download the second image, because it is in their browser's cache.
To get this going, you need to have a small section of script in the HEAD section of your page. Here is a sample of a script that preloads a single image:
<SCRIPT language="JavaScript"> <!-- pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; //--> </SCRIPT>
The first command defines a new image object, giving it a width of 100 and a height of 25. You would replace these with the width and height of your image. The second defines the url or web address of the image. You would replace this with the url of your image. Not too bad now, is it?
However, there is a chance your viewer will come through with an older browser which doesn't support the image object. So, to be on the safe side you may wish to implement a form of Browser Detection or Object Detection to keep from giving the older browsers a javascript error. I will use the shorter one here, which is object detection. For more on object detection, see the tutorial on what it can do.
Here, we want to know if the image object exists, which in javascript is "document.images". So, we just need to check for it with an if condition, and then run the preloading code:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";
}
//-->
</SCRIPT>
There, now you have the code to preload (what a rhyme!). If you want to do this for multiple images, just be sure to assign them a different name-- such as pic2, pic3, and so on. Adjust your width, height, and urls accordingly. You will have two lines for each image. For example, to preload three images, you would use a code like this:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";
pic2= new Image(240,55);
pic2.src="http://someplace.com/image2.gif";
pic3= new Image(88,31);
pic3.src="http://someplace.com/image3.gif";
}
//-->
</SCRIPT>
In the next section you will see an example of how preloading works with the image rollover script. The first section will use browser detection, while the following sections will use object detection like we did here.
Well, that does it for now, Let's go on to the next section, JS Rollovers.