///JavaScript – Pre-loading Images for Faster Display

JavaScript – Pre-loading Images for Faster Display

JavaScript – Pre-loading Images for Faster Display

Remember the rollover effect? If there are just a couple of graphics to grapple with, it does not pose a problem, but an ideal navigation bar generally consists of more than 6 or 7 buttons that need to be rolled over. A very odd situation manifests itself when your mouse is over a button and it is taking ages for the rollover effect to happen.

To avoid such an impasse, we can carry out "pre-load" procedure that loads all the images in advance so that no image acts fussy when it actually needs to appear.

Note: Almost everything that gets displayed on your browser, first gets downloaded onto your computer from the remote server. So what we are going to do here is, download all the graphics in advance so that when there is a call to display them, they are already on the user’s machine.

To elucidate this in a real-world scenario, we are going to create an effect in which, on the left hand side, there is a list of colors, as, Black, Yellow, Red, …, and so on, and on the right hand side, there is a graphical circle.

See Demo

Why I chose this function over the Navigation Rollover buttons is because this could help you create an online photo-album of your friends and family. For instance, on the left hand side, there could be a list of names. The moment the cursor is on a particular name, the picture associated with that name appears on the right hand side box. Cool? So let us proceed.

First the JavaScript that preloads all the images that we need:

<script language="JavaScript1.2">

function preloader()

AllImages=new Array("yellowcirc.gif", "orangecirc.gif", "bluecirc.gif", "greencirc.gif", "redcirc.gif", "blackcirc.gif");

for(loadall=0; loadall<AllImages.length; loadall++)

var LoadedImage=new Image();



An array – AllImages – is created to store the actual names of the graphic files. Take care that you mention the complete path. Some people (recommended) keep the graphic files in a separate folder.

Then the for(){…} loop loads all the images mentioned within the array. You must have observed .src in HTML tags such as <img src="imagefile">. It’s the same concept.

Basically, what the for(){…} loop does is, it creates a new image type variable each time it is executed, and sets the .src attribute of that image type variable to the name of the file to be downloaded, downloading the file in the process.

That’s the quintessential profile of the "preload" JavaScript we need here. Now we arrive at the HTML part of it:

<body onload="preloader();">

<table width="60%" align="center">
<td width="30%" align="center" valign="top">

<a href="#" onmouseover="ImageShown.src=’blackcirc.gif’">BLACK</a><br>

<a href="#" onmouseover="ImageShown.src=’yellowcirc.gif’">YELLOW</a><br>

<a href="#" onmouseover="ImageShown.src=’orangecirc.gif’">ORANGE</a><br>

<a href="#" onmouseover="ImageShown.src=’bluecirc.gif’">BLUE</a><br>

<a href="#" onmouseover="ImageShown.src=’greencirc.gif’">GREEN</a><br>

<a href="#" onmouseover="ImageShown.src=’redcirc.gif’">RED</a><br>


<td width="70%" align="center" valign="middle">

<img src="blackcirc.gif" name="ImageShown">




I’ve purposely inserted blank lines around <a> </a> tags so that you can observe them easily. The crucial line here is, (at least I found it crucial)

<img src="blackcirc.gif" name="ImageShown">

as it assigns a name to the image tag, that later on we can utilize to individually change the source (.src). Setting the default graphic to "blackcirc.gif" bears no technical intonations, it’s just that the text Black appears first in the list of color names.

Another interesting, and a new thing here is, the onload attribute of the <body> </body> tag. It tells the browser to execute a pre-written function whenever the page is loaded. So here, whenever the page is loaded, the preloader() function is executed so that all the graphic files are already there by the time the page in its entirety, ready to appears.

2010-05-26T10:59:52+00:00 June 1st, 2005|JavaScript|0 Comments

About the Author:

Amrit Hallan is a freelance web developer. You can checkout his website at http://www.bytesworth.com. For more such articles join BYTESWORTH REACHOUT at http://www.bytesworth.com/br/default.asp or if you have a web dev related question then post it at http://www.business180.com/index.php

Leave A Comment