Preloading Images

When you are using rollover effects and other graphic tricks, you may run into awkward lags and visual gaps because the image file you need is taking a long time to stream in from the server.

While there's no good answer to this problem, short of hardware changes, you can design your pages so that all those bothersome delays happen up front. This technique is called image preloading.

Generally speaking you should preload images if you have any rollovers whose component graphics are much larger than 2-4 kilobytes, if any of the images on your page exceed 25 kilobytes, or if you have more than five images of any size on your page.

Take a look at the work page for Assignment 2 or at the Image Preloading Demo page to see this technique in action.

Here's a brief explanation of the JavaScript techniques required for preloading. As always, there are various ways to approach this problem. The strategy discussed here may not be the most elegant, but hopefully it is easy to understand.

We begin by initializing an array within a <SCRIPT></SCRIPT> container in the head portion of the document (but outside of any function). This array holds a series of names:

  var pixNames = new Array("firstImage","frank",
  "thirdImage","image4");

These image names are entirely arbitrary, as you can see. In this particular version, they are not complete pathways or file names (though they could be if you like).

Next we initialize a second array, also within the <SCRIPT></SCRIPT> container but outside of any function:

  var imageSet = new Array(pixNames.length);

The value in parentheses, "pixNames.length", refers dynamically to the length of the first array and defines the length of the second array, so the two are guaranteed to match no matter how many elements we add to pixNames.

The next necessary element is a for loop which is used to populate the second array:

  for(x=0; x<pixNames.length; x++)
    {
      imageSet[x] = new Image(100,50);
      imageSet[x].src = "images/"+pixNames[x]+".jpg";
    }

The first statement in the loop creates an array of Image objects, each with dimensions of 100px by 50px. These numbers could of course be changed, but only for the entire array: all images in this sort of uniform array must have the same dimensions.

An Image object comes with various properties and methods. For every Image object you create, you must specify an SRC (image source) property. The second statement in the loop specifies the file pathway or SRC value for each object in the imageSet array. In this example, we assume that the images we want are stored in a subfolder called "images" one level below the present page in the file hierarchy.

Once this loop has run, all the images should have been transferred from the server to the client and loaded into the browser cache. There should then be no lag when any of these images is needed.

Remember, though, that preloading itself takes about as much time as it would take to load your component images individually. Therefore some designers come up with some kind of briefly interesting content which users can view during the loading operation. You can tell when to break away from this content and take users to the main show by performing this test:

  if(imageSet[imageSet.length].complete)

The if condition above evaluates to true if the final image in the series has been transferred from the server. How you use this test is up to you; in one approach, you can have a holding function update some part of the screen, for instance the status bar or a form field, until the if condition is satisfied. When the condition is false, the holding function calls itself recursively; once the condition turns true, the holding function hands off to some other function.

Finally, we need to adjust the way we handle JavaScript SRC replacement in our rollover code. Without preloading, we'd handle SRC replacement with a statement like this:

document.images[which].src = images/button2_On.jpg;

But while this statement will still work with a preloaded image set (assuming there is a JPEG file named "button2_on.jpg" in the correct directory), it will circumvent the preloading effect! That is, calling the image source directly bypasses the Image object we so carefully set up.

To take full advantage of the preloaded object, we have to substitute a statement like this:

document.images[which].src = imageSet[x].src;

Note that we're referring to two distinct arrays here, one the standard document.images array and the other the object array we created for our preloading. These arrays have different index variables--here we call them "which" and "x" though they could be called almost anything. The variables must be different because we're selecting from two different sets of options, the set of all IMG tags on the page in the first case and the set of all preloaded Image objects in the second. You'll have to figure out a way to generate values for these variables. Look at the demonstration code for examples.

Note finally that the SRC reassignment transfers the SRC from one object to another. That's perfectly okay in JavaScript.