12.1 Precaching Images

NN 3, IE 4

12.1.1 Problem

You want an image rollover to swap the image instantaneously the first time, rather than forcing the user to wait while the alternate image downloads from the server.

12.1.2 Solution

Begin by creating two custom objects whose property names are assigned as strings. These names become the ones you will use to reference instances of a hidden image object for each image. One of the custom objects contains references to all normal image files, the other to all highlighted image files:

if (document.images) {
    var imagesNormal = new Object( );
    imagesNormal["home"] = new Image(20, 50);
    imagesNormal["home"].src="img/homeNormal.jpg";
    imagesNormal["products"] = new Image(20, 50);
    imagesNormal["products"].src  = "img/prodNormal.jpg";
    ...
    var imagesHilite = new Object( );
    imagesHilite["home"] = new Image(20, 50);
    imagesHilite["home"].src="img/homeHilite.jpg";
    imagesHilite["products"] = new Image(20, 50);
    imagesHilite["products"].src  = "img/prodHilite.jpg";
    ...
}

As the page loads, the images (except as noted in the Discussion) are loaded into the browser's image cache but not displayed. Recipe 12.2 shows how image rollover scripts access these cached images.

12.1.3 Discussion

Although very few scriptable browsers in use today are not capable of performing image swapping, it is still a good idea to wrap statements involving image objects of any kind inside object detection that verifies the existence of the document.images array. The precaching portion of code does not involve the rendered img elements, so other DOM referencing tests are not well-suited to this task.

The usage of custom objects in the Solution is not a requirement for image caching. As you can see in Recipe 12.2, however, objects can simplify the scripting and management of image rollovers. It is no accident that the string index values of the object entries echo what will be the id attribute values of img elements whose images change.

Each object property consists of an instance of an Image object. This object exists strictly in memory and never displays a picture. But this object has the same properties as the img element object, particularly the dimensions (height and width) and the URI (src). Passing the pixel height and width of the image to the Image( ) constructor function is not vital, but it can speed up the precaching slightly because the browser doesn't have to wait for the image to load to calculate its dimensions.

The real caching work, however, occurs when the statement assigning a URI to the src property executes. The browser immediately tries to resolve the URI, and downloads the image to the browser.

If you encounter a situation in which the images do not appear to precache themselves (for instance, you experience download delays in image rollovers), look to the server configuration as the primary problem source. It is not uncommon for a web server (especially one that supplies frequently updated content) to be set to send HTTP headers for some or all MIME types that tell browsers to prevent content from caching in the browser. Make sure that headers for your image types do not declare an expiration date or "no-cache" instruction.

Users, too, may confound your efforts to precache images if they turn off browser caching in their Preferences settings. You cannot override this setting, but such users must already be accustomed to complete downloading of all content, no matter how frequently they visit a page.

With many browsers, you can verify that your images are in the cache. In IE for Windows, open the Tools Internet Options window. In the General panel, click the Settings button in the Temporary Internet Files section. Click the View Files button to see a listing of all files currently in the browser's cache. IE for the Macintosh doesn't provide this direct access. For Netscape Navigator 6 or later, enter the URL about:cache. Click on the links shown to view files in the memory and disk caches. The browser window fills with a list of items currently in the cache. For Navigator 4.x and earlier, a dedicated image cache list is available at about:image-cache.

12.1.4 See Also

Recipe 12.2 for image rollovers; Recipe 10.9, Recipe 10.10, Recipe 10.11, and Recipe 15.8 to see examples of precached images in applications.