Preloading is used for loading images into memory before they are to be used. An example of this would be the MouseOver images used in rollovers. By preloading the browser doesn't have to go back to the server for the image.

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
Adding an array of many images

Code

    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];
    }