Precaching Images

calendar October 5, 2009

Javascript enabling scripts to load images into the browser’s memory cache without displaying the image, a technique called precaching images.

Precaching an image requires constructing an image object in memory:

var myImage = new Image(width, height);

parameters to the constructor function are the pixel width and height of the image.

Code:

<html>
 <head>
 <title>Image Object</title>
 <script type="text/javascript">
 var imageArray = new Array();
 imageArray['image1'] = new Image(100, 100);
 imageArray['image1'].src = "img1.gif";
 imageArray['image2'] = new Image(100, 100);
 imageArray['image2'].src = "img2.gif";
 imageArray['image3'] = new Image(100, 100);
 imageArray['image3'].src = "img3.gif";
 function loadImages(list)
 {
   var img = list.options[list.selectedIndex].value;
   document.thumb.src = imageArray[img].src;
 }
 </script>
 </head>
 <body>
 <h3>Image Object</h3>
 <img src="img1.gif" name="thumb" width="100" height="100" />
 <form>
 <select onchange="loadImages(this)">
 <option value="image1">Image 1</option>
 <option value="image2">Image 2</option>
 <option value="image3">Image 3</option>
 </select>
 </form>
 </body>
</html>
admin Image

Leave a Reply

You must be logged in to post a comment.