Preloading Images for Speed


The code in Listing 17.1 works flawlessly in all major web browsers, but there is one minor problem: The lit images won't be downloaded from your web site until someone actually moves the mouse over the image. This can sometimes cause a noticeable delay before the highlighted image appears, primarily if the person is viewing your page over a slow Internet connection. The end result is a possible lowering of the all-important Gee Whiz Factor (GWF).

You can avoid this annoyance by including some JavaScript code telling the browser to preload the images as soon as possible when the page is displayed. That way, by the time the slow human reader gets around to passing his or her mouse over the link, those images will usually be ready to pop onto the screen. This makes the animations seem to appear without any download delay, giving the page a snappy feel and pumping the GWF back up to truly nerdy levels. Listing 17.2 shows the script code that makes this happen.

Listing 17.2. The Script Code to Preload the Images from Figure 17.2
 <script type="text/javascript">   <!-- Hide the script from old browsers   var image1 = new Image();   image1.src = "news_static.gif";   var image2 = new Image();   image2.src = "news_hover.gif";   var image3 = new Image();   image3.src = "products_static.gif";   var image4 = new Image();   image4.src = "products_hover.gif";   var image5 = new Image();   image5.src = "order_static.gif";   var image6 = new Image();   image6.src = "order_hover.gif";   var image7 = new Image();   image7.src = "goodies_static.gif";   var image8 = new Image();   image8.src = "goodies_hover.gif";   var image9 = new Image();   image9.src = "about_static.gif";   var image10 = new Image();   image10.src = "about_hover.gif";   // Stop hiding the script --> </script> 

There are a couple of things worthy of note in this listing. The most important is the <script> tag, which can be placed in the <head> or <body> section of a document. However, if a script is intended to be run when a page is first loaded, as is the case here, most web developers would place the <script> tag in the head of the page.

As you learned earlier in the hour, the <!-- and //--> tags just inside the <script> and </script> tags are actually comment tags, which have the effect of hiding the script from older browsers that otherwise might become confused and try to display the code as text on the page.

I won't go too deep into an explanation of the JavaScript code in the listing because that would get us into a course on computer programming. You don't need to understand exactly how this works in order to copy it into your own pages, using your own image names and graphics files. The main thing to take note of is that it takes two lines of code to preload each image. The first line creates a blank image, and the second line sets it to an image file so that it is loaded. You can use this one-two JavaScript punch to preload as many of your own images as you want.




SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net