Loading Images into Cache

JavaScript Editor

Best javascript editor debugger Ajax website
↑

Main Page

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="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="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).

JavaScript Editor

Best javascript editor debugger Ajax website
→