New JavaScript Mouse Events: Preloading Images

Preloading:keep your image onDeck awaiting its turn

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:

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.