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:
-
The document contains images that change while the document is being displayed (for example, link buttons that change when the mouse passes over them). To avoid animation delays, the new images should be loaded before they are required.
-
You are reasonably sure that the image will appear in the next document the user loads. For example, if your web site has a "splash page," you can increase the client browser's performance (and thus the client's satisfaction with your page) by pre-loading the images from the next page.
Pre-loading an image requires a simple, two-step process:
- Create an image object using the
new operator.
- 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):
<script>
nextimage = new Image ();
nextimage . src = "nextimage.gif";
</script>
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