| home / experts / dhtml / column1 |
  
|
|
Browsers that support the JavaScript 1.1 Image object (NN3+ / MSIE4) will load
an image, regardless of whether it is immediately displayed, if its src
(location) is referenced in the document.
There are several ways to accomplish this.
The best method is to create a new Image object and set the value of its src property. The worst, of course, is actually
loading it into a page with both its WIDTH and HEIGHT values set to 1. We've encountered pages where an image was loaded for later use by shrinking it to 1x1 and using it as the period ending a sentence. Don't have these authors screw in a lightbulb for you. You might have to buy a new house.
These two assignments, placed in the document <HEAD> are all that is necessary for preloading an image:
imButDown = new Image(); // call the Image constructor and
imButDown.src = "imButdown.gif"; // set src property by referencing a
// location, causing image to load
If you have many images to preload, use this method for less typing and easier editing:
Create an array to contain the src's of all images to be preloaded:
arImageSrc = new Array (
Itemize the src's, separated by commas, except for the last one, and close the array:
"imButdown.gif",
"imButup.gif",
"imButthis.jpg",
.
.
.
"../images/imButthat.jpg" )
Create a second array, the elements of which will be new Image objects
arImageList = new Array ();
Use for and in to perform the same task on every element in the src array. That is, for every image src that you previously listed, a new Image object will be created and its src property set automatically by the routine.
for (counter in arImageSrc) {
arImageList[counter] = new Image();
arImageList[counter].src = arImageSrc[counter];
}
If, when your page is modified, you want to insert or omit an image, just add or omit an src entry from the first array.
arImageSrc = new Array (
"imButdown.gif",
"imButup.gif",
"imButthis.jpg",
.
.
.
"../images/imButthat.jpg"
)
arImageList = new Array ();
for (counter in arImageSrc) {
arImageList[counter] = new Image();
arImageList[counter].src = arImageSrc[counter];
}
Tips:
If all your images are the same type, if they are all
gifs for instance, then the .gif extension can be omitted from the
first array and the last line in the for loop could read:
arImageList[counter].src = arImageSrc[counter] + ".gif";
If all your images are found in the same path, omit the path from the first list and make this change:
arImageList[counter].src = pathstring + arImageSrc[counter] + ".gif";
Let's combine onMouseDown and onMouseUp with onMouseOver and onMouseOut to create a dynamic application-program-type button.
Produced by Peter Belesis and
| ||||||||||||||||||||
All Rights Reserved. Legal Notices.
Created: 07/23/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column1/preload.html
