Browse DevX
Sign up for e-mail newsletters from DevX


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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.



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