advertisement -- please support sponsors

images, performance:
pre-loading images for performance

How can I pre-load an image into the cache so that it is immediately ready when I need it?

JavaScript has a special kind of object called the Image object which makes it possible for JavaScript programs to load images without displaying them in the browser window. Loading an image without displaying it means that later, when the time comes to actually display it, the image will be instantaneously available from the cache.

Pre-loading an image is useful in the following situations:

Pre-loading an image requires a simple, two-step process:
  1. Create an image object using the new operator.
  2. Set the image object's src property equal to the image's URL. This causes the browser to begin loading the image.
The following HTML/JavaScript code uses these steps to pre-load the image nextimage.gif (without displaying it in the browser window):
nextimage = new Image ();
nextimage . src = "nextimage.gif";
More information on the Image object, including how to determine whether an image has finished loading, can be obtained from Netscape Communication's JavaScript Authoring Guide.

Charlton Rose
11 Jan. 1997