April 1999

Preloading Images into Arrays

In the December 1998 issue of Microsoft Web Builder, you published a letter to the editor regarding image cacheing using arrays. Can you give me a more detailed description of how this can be done?

Brian Simmons
via email

To answer your question, I've worked up a little application that demonstrates how to preload images into an array, and then use the array to access each image as it's displayed. But first, a few words about the Image object.

Image object properties

Images are considered first-class objects in Internet Explorer 4, and to a more limited extent in Internet Explorer 3. Giving images this distinction allows scripts to access an image's properties, and allows you to change images on your Web pages at runtime. It also allows you to preload your images into the image cache all at once before they're displayed. Preloading images allows you to swap them almost instantaneously, without having to wait for them to download.

The most valuable image object property is the src property. Assigning an image's URL to the src property of an image object lets you load that new image into an existing space on your page created by an <IMG> tag. You can also set the new image's height and width using the image object's height and width properties; if these aren't set, the image's size defaults to the size specified in the <IMG> tag.

An Image object application

Listing A shows you the code for the page in Figure A. The user can select a ballet position, and an image and description of the position appears in the table. In Figure B, we've chosen Third position.

Figure A: The page we've created starts with a default image within an IMG tag.

[ Figure A ]

Figure B: Selecting a new ballet position from our Selection list swaps a new image into our table without waiting for the image to load.

[ Figure B ]

The BODY code places a default image on the page within an <IMG> tag with the statement:


<IMG id ="imagepos" src="pos1.jpg" 
	width="150" height="300">

In the script, we begin by creating a new array object, balletarr, with six cells to hold our different ballet images. Inside the loop, we create five new Image objects, and place them inside our array at indices 1 to 5. We then assign the address of each of our ballet images to the src property of each of the objects in the array, with the statements:


var balletarr = new Array(6);
for (i = 1; i < balletarr.length; i++) {
	balletarr[i] = new Image();
	balletarr[i].src = "pos" + (i) + ".jpg";
}

For convenience, notice that we've named our default image pos0, and the images that we're swapping are named pos1, pos2, etc. In the script, we also create a second array, descarr, to hold the text descriptions to go with each of the images. The JavaScript statements that place all of the images and text into the arrays are outside of a function, and so are processed when the page first loads. Selecting one of the Options from our Select element calls the loadimg function, as in:


<SELECT size="1"id="position"
	onchange="loadimg()">

The loadimg function gets the Option that was selected by using the Select element's selectedIndex property, which it places into a variable named nextimage. We can then use nextimage as an index into both the image and the description arrays. Note that we used the ID of the <IMG> tag, imagepos, to assign a new image to the <IMG> element, as in


document.all.imagepos.src =
	balletarr[nextimage].src;

Listing A: Code for our Image object application


<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var timerId;
var nextimage;
var cycimage;

var balletarr = new Array(6);
for (i = 1; i < balletarr.length; i++) {
	balletarr[i] = new Image();
	balletarr[i].src = "pos" + (i) + ".jpg";
}

var descarr = new Array(6);
descarr[0] = "There are five basic positions of the " 
	+ "feet in classical ballet, and every step or "
+ "movement is begun and ended in one of these "
+	"positions.";
descarr[1] = "In first position, the feet form a "
	+ "straight line, toes out, heels together.";"
descarr[2] = "In the second position the feet are in "
	+ "the same line, but have a distance of about "
	+ "one foot between them.";
descarr[3] = "In the third position, one foot is in "
	+ "front of the other, with the heel of the front "
	+ "foot touching the middle of the back foot.";
descarr[4] = "The fourth position is similar to the "
	+ "third position, except that the feet are "
	+ "parallel and are separated by the length of one "
	+ "foot.";
descarr[5] = "In the fifth position, the feet are "
	+ "crossed so that the heel of the front joint "
	+ "of the big toe shows beyond the heel.";

function loadimg () {
	nextimage = document.all.position.selectedIndex;
	document.all.imagepos.src =
		balletarr[nextimage].src;
	document.all.descr.innerText = descarr[nextimage];
}

function timerset () {
	if (document.all.cycle.checked) {
		timerid = setInterval ("docycle()",500);
		cycimge = nextimage;
	}	
	else
		clearInterval(timerid);
}

function docycle () {
	if (cycimage < (balletarr.length - 1)) 
		cycimage += 1;
	else
		cycimage = 1;
	document.all.imagepos.src = balletarr[cycimage].src;
	document.all.descr.innerText = descarr[cycimage];
	document.all.position.selectedIndex = cycimage;
}
	
</SCRIPT>
</HEAD>
<BODY>

<H1 align="center">The basic ballet 
	positions of the feet </H1>
<TABLE align = center border="3" width = 600 
	height = 350 cellpadding = 6>
	<TR>
		<TD><IMG id ="imagepos" src="pos0.jpg" 
		width="150" height="300"> </TD>
		<TD id="descr"> There are five 
			basic positions of 
			the feet in classical ballet, 
			and every step 
			or movement is begun and ended 
			in one of these 
			positions.</TD></TR>
	<TR>
		<TD align="center" colspan="2">
		<SELECT size="1"id="position"
			onchange="loadimg()">
			<OPTION selected> Select a 
			position </option>
			<OPTION> First position </option>
			<OPTION> Second position </option>
			<OPTION> Third position </option>
			<OPTION> Fourth position </option>
			<OPTION> Fifth position </option>
		</SELECT> </TD>
    </TR>
</TABLE>
<P>
<CENTER><input type="checkbox" name="cycle" onclick = 
	"timerset()"> Check here to cycle through all of the 
	positions </P></CENTER>
</BODY>
</HTLM>

An extra array application

We've included one more bit of code to our application to show you how useful arrays can be where swapping images are concerned. If you look at Figure A, you'll see that the user can choose to cycle through all of the images in the image array. We do that by calling the timerset function when the user clicks on the Checkbox element we've placed on the page. If the check box was checked (as opposed to unchecked) when it was clicked, the timerset function calls setInterval to repeated call the docycle function. (If you have questions about the setInterval function, see "Using setTimeout and setInterval for timing events" in our February 1999 issue of Microsoft Web Builder.) If the check box is unchecked, the setInterval function is cleared.

Each time the docycle function is called, it increments cycimage, which is an index into both the image and description arrays, and then swaps in the next image and the next description. Using arrays allows you to complete this process simply, with very few lines of code. And, swapping images is fast. To see how fast, download the code from our ftp site and try it out.

Copyright © 1999, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners.