How do I preload images with Javascript?

It is often important to do this especially if you are using big rollover images.

The basic principle (i.e. if you wanted to preload a single image) is:

var preloadImg = new Image();

preloadImg.src = "/folder/my_graphic.gif";

To load more than one image you would then need to create an array which runs through all the different graphics and preload them (see resources below for variations on the general theme).

------------------------------------
Relevant threads:

Fix for Image Cache Probs

Preload Problems

in need of a script

Problem preloading animated gif....

Preloading Q? I've searched but could not find an answer,

Lots of preload images-Page loads slow

Preloader

Preloading images

Table Size & Preloading Scripts

Preload

preloading images

JavaRollover images don't preload

Gecko Rollover Problem

Best way to preload a site (images)?

attempt at doing a preloader... need help (as usual)

Preloading a page...

preload question

preloader

Preloading images

Handling Preloading

JS Preload Script

------------------------------------
Relevant FAQs:

How do I dynamically swap images?

How can I create rollovers without JavaScript?

------------------------------------
Relevant notes:

As of the time of writing this FAQ was ranked 6 at Google for the terms preload, images, javascript and 11 for preload, images (down from 9).

___________________________
Emperor

(Added by: Emperor on Tue 03-Sep-2002)

(Edited by: Emperor on Thu 21-Aug-2003)