Loading Images into Cache

You can use JavaScript to load all of the images into your browser's cache as the page is initially displayed on the screen. One benefit is that rollovers (see page 324) are instantaneous.

To load images into cache:

1.	In a separate text document, on the first line, type label=, where label is a word that identifies the image.
2.	Type new Image(h,w), where h and w are the image's height and width, in pixels.
3.	On the next line, type label, where label matches the label used in step 1.
4.	Directly following the name in step 3 (i.e., with no extra spaces), type .src="/books/2/62/1/html/2/image.url", where image.url is the location of the image on the server.
5.	Repeat steps 14 for each image you wish to load into cache (Figure 20.11). Figure 20.11. Here's the loadimages.js file that I use to load the cat images into cache in order to make the rollover effect appear more fluidly. You can preload as many images as you'd like. There should be two lines for each imageone to create the image space and one to fill it with the corresponding URL.
6.	Save the script in text-only format and call it loadimages.js.
7.	In the head section of the (X)HTML document that uses the images, type <script type="text/javascript" language="javascript" src="/books/2/62/1/html/2/loadimages.js"> </script>, where loadimages.js is the name of the file you saved in step 6.
8.	When you refer to the images in other scripts, use label.src (without quotes), where label is the word you used to describe the images in step 1 (Figure 20.12). Figure 20.12. Notice that the scripts in the body of the page (explained on page 324) now reference the bigcat.src and littlecat.src objects. You don't need to enclose these labels in quotes, as you do with the actual file names (step 3 on page 324).