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 we may want the same fast response that users are accustomed to. It may be an irritating while users are waiting for image(s) to be downloaded for a page. JavaScript comes to the rescue by enabling scripts to load images into the browser’s memory cache without displaying the image, 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 we 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, we can then assign a file name or URL to the src property of that image object:

myImage.src = "img1.jpg"

When the 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. We can then assign our 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.

Look at the below example

<!doctype html>
		<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")
		<h2>Image Objects</h2>
		<img src="resources/images/img1.jpg" name="image" height="90" width="120"/>
			<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>

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, we have used the eval() function which is a part of the JavaScript language. We 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. Thank you for your reading.


Related posts

Leave a Comment