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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source
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')">


People who read this tip also read these tips:

Look for similar tips by subject:

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script · Book Review: Content Rich
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags