Inside Technique : Back to Basics with Images : Pre-loading Images

One of the more useful Image manipulations is to preload your images. Preloading images is where you try to download images for subsequent pages in advance. By preloading images, you can make your web-site appear quicker.

Prior to scripting, there was an HTML trick for trying to download your images. With this technique, you define the images you want preloaded at the end of your document with a width and height of 1. This leaves a few hard to see pixels on the screen but allows the images to be downloaded. One major disadvantage to this approach is that these images may cause the required images for the page to be delayed because the download order of images is undefined.

Using the Image object, you can make an efficient image preloader. The Image object allows you to download images into the browser's cache. Once in the cache, any pages that use these images will be displayed instantly. New image objects are created using the JavaScript new keyword:

  // Create a new image object
  var loadImage = new Image
  // Download an image
  loadImage.src = "/gifs/insided.gif"

The above two lines of script will allow the insided.gif to start downloading in the background. You often don't want images being preloaded to take bandwidth away from the downloading page. The easy fix is to start downloading the images in the document's onload event. This ensures the rest of the page is finished before you start fetching additional images:

function DoLoad() {
  var loadImage = new Image
  loadImage.src = "/gifs/insided.gif"
}

window.onload = DoLoad;

The image object also supports 2 events, onload and onerror. You can use these events to determine when the image is finished downloading or whether an error has occurred. These events must be specified on the image object before setting the src property. This ensures that the image does not finish loading before the event handlers are specified (this can occur if the images are already in the cache). A useful technique is to use the onload and onerror events to sequence the downloading of images.

var imgArray = new Array("/gifs/insided.gif","/gifs/logo.gif","/gifs/cover.gif")
var iCnt = 0

function DoLoad() {
  if (iCnt < imgArray.length) {
    var loadImage = new Image
    iCnt++  
    loadImage.onerror = loadImage.onload = DoLoad
    loadImage.src = imgArray[iCnt-1]
  } else
    window.location.replace("NextPage.htm")
}

window.onload = DoLoad

We set both the onload and onerror event to the same function. Alternatively, if an error occurs you can choose to call a different function. In addition, the DoLoad function also navigates you to the next page after the images defined by the imgArray are completely downloaded. We used the replace method so that the preloader page does not get added to the browser's history. This is useful so the preloader page is skipped if the back button is pressed.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.