• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

12. Visual Effects for Stationary Content > 12.1. Precaching Images

Precaching Images

NN 3, IE 4

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.

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";
    ...
}

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint