Planet CakePHP

Preloading of images using Javascript is a technique used often in websites lately. To load the images for Rollover Effects or other image related components/scripts which work effectively when images are preloaded. What the Script does is it starts loading the images in the HEAD tag of your page and stores it in the browser’s cache. Viewers don’t need to wait for the images to download as when when needed.

// Set an array of the images that needs to be preloaded.
var images = new Array('images/image1.png', 'image2.jpg', '../image/image3.gif');

var imageObjs = new Array();

//loop through the array and load the images one by one.
for (var i in images) {

// initialize an Image object
imageObjs[i] = new Image();

// defines the path of the image from the array
imageObjs[i].src = images[i];

}