Dynamic HTML Example : Image Cache with Javascript
Image Cache is used to preload image files so they are quickly available for use
by the current file and/or other files that may be linked to the current file. Generally,
images should be cached after the current file is loaded so as not to interfere with the
loading speed of the current file.
Three steps are required to cache images:
1. Declare a variable name for each Image.
2. Use the variable name within a JavaScript function to create an src for each image.
3. Call the function after the current file is loaded.
Note that the image variable name and the image file name can be identical. This
saves the developer the effort of creating extraneous names for image variables.
var imageName1 = new Image()
var imageName2 = new Image()
function cacheImages()
{
imageName1.src= "imageName1.jpg"
imageName2.src= "imageName2.jpg"
}
The above function could be called after the file body has loaded, with the images then
available to other image handling functions of the current file. Also, once the image
file is cached, it is usable by other links requiring the image.