Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Essential JavaScript: 8 Cross-Browser Solutions-6 : Page 6

There's a core set of problems that every JavaScript developer will run across sooner or later. This article shows you how to deal with eight of the most common situations.


advertisement

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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date