Essential JavaScript: 8 Cross-Browser Solutions

Internet.com - The Network for Technology Professionals

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

Premier Club Log In/Registration

TODAY'S HEADLINES | ARTICLE ARCHIVE | SKILLBUILDING | TIP BANK | SOURCEBANK | FORUMS | NEWSLETTERS

Specialized Dev Zones

Vendor Solutions

eBook Library NEW

Semantic Web NEW

Special Reports

10-Minute Solutions

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

Rate this item | 0 users have rated this item.

Print

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

Was this article useful? Please log in to rate this item.

Don't have a log in? Get one now.

Submit article to:

Untitled

Advertising Info | Member Services | Permissions | Contact Us | Help | Feedback | Site Map | Network Map | About

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

Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency Intel eBook: Managing the Evolving Data Center Microsoft Article: BitLocker Brings Encryption to Windows Server 2008 Symantec eBook: The Guide to E-Mail Archiving and Management Microsoft Article: RODCs Transform Branch Office Security Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program		Avaya Article: Advancing the State of the Art in Customer Service Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization HP Webcast: Disaster Recovery Planning Go Parallel Video: Performance and Threading Tools for Game Developers		HP Video: StorageWorks EVA4400 and Oracle HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control IBM Energy Efficiency eKIT: Learn How to Reduce Costs 30-Day Trial: SPAMfighter Exchange Module		Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All Featured Algorithm: Intel Threading Building Blocks - parallel_reduce		HP Demo: StorageWorks EVA4400 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES