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.
| 
No comments:
Post a Comment