JavaScript Image Preloading

Here are various JavaScript methods for preloading images you will be using in a webpage. Its up to you to decide when the right time to use it.

Code Example: Single Image

var homeRollOver = new Image(250,250);
homeRollOver.src = "/images/home_hover.jpg"

Code Example: Multi-Image

var imageDir = "/images/";
var images = new Array;

images[0] = new Array("home_hover.jpg",250,250);
images[1] = new Array("blocked.jpg",64,64);
images[2] = new Array("sun_icon.jpg",128,128);

var imageCache = loadImages(imageDir,imageCache);

function loadImages(path,images) {
var imageCache = new Array;
for (var i=0; i<images.length; i++){
imageCache[i] = new Image(images[i][1],images[i][2]);
imageCache[i].src = (path + images[i][0]);
return (imageCache);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s