Precached images using JavaScript

Images often take several extra time to download from a Web server. If images change in response to user actions then you may want the same fast response that users are accustomed to. It may be an irritating situation while users are waiting for image(s) to be downloaded for a page and the page is loading slowly due to such images.

JavaScript comes to rescue in this situation by enabling scripts to load images into the browser’s memory cache without displaying the image instantly, a technique called precaching images. In this technique images load into browser’s image cache when the page initially loads. A precached image differs in some respects from the document object that you create using <img/> tag.

Objects created in memory are not seen on the page at all but their presence in the document code forces the browser to load images when the page gets loaded. The Image object constructor function is used to create the memory type of image object as follows:

var myImage = new Image(width, height)

Parameters to the constructor function are the pixel width and height of the image. These dimensions should match the <img/> tag’s width and height attributes. Once the image object exists in memory, you can then assign a file name or URL to the src property of that image object, where img1.jpg is your image in the current directory.

myImage.src = "img1.jpg"

When a browser encounters a statement assigning a URL to an image object’s src property, the browser loads that image into the image cache. All users see is some extra loading information in the status bar, as if another image were in the page. By the time the entire page loads, all images generated in this way are tucked away in the image cache. You can then assign your cached image’s src property or the actual image URL to the src property of the document image created with the <img/> tag:

document.images[0].src = myImage.src

The change to the image in the document is instantaneous.

PreCached Implementation

Here I am implementing the precache for images using JavaScript. I am assuming the image file names for this example but these images are not available in this example.

<!doctype html>
<html>
	<head>
		<script type="text/javascript">
			// precache four images
			image1 = new Image(120,90)
			image1.src = "resources/images/img1.jpg"
			image2 = new Image(120,90)
			image2.src = "resources/images/img2.jpg"
			image3 = new Image(120,90)
			image3.src = "resources/images/img3.jpg"
			image4 = new Image(120,90)
			image4.src = "resources/images/img4.jpg"
			image5 = new Image(120,90)
			image5.src = "resources/images/img5.jpg"
			// load an image chosen from select option
			function loadCached(list) {
				var img = list.options[list.selectedIndex].value
				document.thumbnail.src = eval(img + ".src")
			}
		</script>
	</head>
	<body>
		<h2>Image Objects</h2>
		<img src="resources/images/img1.jpg" name="image" height="90" width="120"/>
		<form>
			<select name="cached_images" onChange="loadCached(this)">
				<option value="image1">Bands</option>
				<option value="image2">Clips</option>
				<option value="image3">Lamp</option>
				<option value="image4">Erasers</option>
				<option value="image5">Pencils</option>
			</select>
		</form>
	</body>
</html>

At the time of the page loading several statements are executed immediately. These statements create four new image objects in memory and assign filenames to the objects’ src property. These images are loaded into the image cache when the page loads. In the body part of the document, an <img/> tag loads one of the images as a starting image.

A select element lists user-friendly names for images while housing the names of image objects already precached in memory. When the user makes a selection from the dropdown, the loadCached() function extracts the selected item’s value which is a string version of the image object name.

To convert a string name to a reference to the object of that same name, I have used the eval() function which is a part of the JavaScript language. You need the src property of that object, so the eval() function is applied to a string version of the reference to an image object’s src property. The src property of the chosen image object is assigned to the src property of the visible image object on the page, and the precached image appears instantaneously.

That’s all about how to precache your images for improving page load using JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *