September 27, 1999 - Preload Your Images | WebReference

September 27, 1999 - Preload Your Images

Yehuda Shiran September 27, 1999
Preload Your Images
Tips: September 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

If you're going to create an animation or a rollover, you'll probably want to preload the necessary images. We'll use the onLoad event handler to cache the images after the entire page has completely loaded. The following function accepts a list of image URLs, and preloads those images:

function preload() {
  if (!document.images) return;
  var ar = new Array();
  var arguments = preload.arguments;
  for (var i = 0; i < arguments.length; i++) {
    ar[i] = new Image();
    ar[i].src = arguments[i];
  }
}

Now you're ready to invoke the function. The following event handler definition does the job:

<BODY onLoad="preload('first.gif', 'second.gif', 'third.gif')">