Essential JavaScript: 8 Cross-Browser Solutions

Premier Club Log In/Registration

Specialized Dev Zones

DevXtra Editors' Blog

Shop DevX

Premier Club

APIfinder

Download the code for this article

Microsoft Windows Script Technologies

Creating Classy Menus with JavaScript

Get Help with DHTML

Past DHTML 10-Minute Solutions

DevX: Web Development Zone

Do you have other suggestions for core JavaScript problems that you'd like to see addressed in this column? Do you have solutions for them? Join the discussions a web.dhtml.general and web.dhtml.scripting to get answers, make comments, or help others with their problems.

Partners & Affiliates

Average Rating: 1/5 | Rate this item | 1 user has rated this item.

Essential JavaScript: 8 Cross-Browser Solutions (cont'd)

Preloading Images
Problem 5: I've created rollover buttons but there is a noticeable delay before the rollover occurs. How do I get rid of the delay?

Preload your images in memory to avoid a return trip to the server for the new image. To preload images, declare a JavaScript image object and set its src property to the URL of the image. Doing this creates an image stored off screen in memory—often called an image buffer. Then, use the image object to swap the buffered image rather than the actual file:

   var aboutOn = new Image();
   aboutOn.src = 'aboutOn.gif';
   var aboutOff = new Image();
   aboutOff.src = 'aboutOff.gif';
   
   function on(img){
   document[img].src = eval(img + 'On').src;
   }
   
   function off(img){
   document[img].src = eval(img + 'Off').src;
   }

When you place the script in the <head> section of a document, the browser will load the images into memory before processing the <body> element. Be careful, though—the more images you preload, the longer it will take your users to see any content at all.

Previous Page: Creating Image Rollovers

Next Page: Making a JumpList Combo Box

Download The Code for this Article

Page 1: Introduction	Page 6: Preloading Images
Page 2: Sniffing the Browser	Page 7: Making a JumpList Combo Box
Page 3: Writing Cross-Browser Scripts	Page 8: Showing and Hiding Layers
Page 4: Determining Display Characteristics	Page 9: Intercepting Form Submission
Page 5: Creating Image Rollovers