16.2 Off-Screen Images and Caching

To force an image to be cached, we create an off-screen image and load the desired image into it. Then, when the image is required on-screen, we know it will be quickly loaded from the cache rather than slowly loaded over the network. Example 16.1 shows code that performs a simple animation using this technique.

<!-- The image that will be animated. Give it a name for convenience -->
<IMG SRC="images/0.gif" NAME=animation>
<SCRIPT>
// Create a bunch of off-screen images, and get them started 
// loading the images we're going to animate.
images = new Array(10);
for(var i = 0; i < 10; i++) {
    images[i] = new Image();                 // Create an Image object
    images[i].src = "images/" + i + ".gif";  // tell it what URL to load
}
// Later, when we want to perform our animation, we can use these URLs,
// knowing that they've been loaded into the cache. Note that we perform
// the animation by assigning the URL, not the Image object itself.
// Also note that we call the image by name, rather than as document.images[0].
function animate()
{
    document.animation.src = images[frame].src;
    frame = (frame + 1)%10;
    timeout_id = setTimeout("animate()", 250);  // display next frame later
}
var frame = 0;         // Keep track of what frame of the animation we're on.
var timeout_id = null; // This allows us to stop the animation.
</SCRIPT>
<FORM>                   <!-- Buttons to control the animation -->
  <INPUT TYPE=button VALUE="Start" 
         onClick="if (timeout_id == null) animate()">
  <INPUT TYPE=button VALUE="Stop" 
         onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
</FORM>

Example 16.1 demonstrates the important steps involved in creating an off-screen image for image caching. The first step is to create an Image object with the Image() constructor. The second step is to assign the URL of the desired image to the src property of the newly created Image object. Doing so will cause the browser to start loading the contents of the specified URL, which, unless caching is turned off, will cause the image to be loaded into the cache, even though it is not displayed anywhere.

A confusing detail about the use of off-screen Image objects is that they are not themselves directly used for anything. To perform image replacement with an off-screen Image object, you do not assign the Image object directly into the images[] array of the Document object. Instead, you simply set the src property of the desired on-screen image to the URL of the desired image. If this URL has previously been loaded by an off-screen image, then the the desired image should be in the cache and the on-screen image replacement will happen quickly. The off-screen image object is used to force the image to be loaded, but there isn't anything else that you can do with it.