Mouseover Images

Preloading Images

Most Web browsers these days are pretty smart. When they load something, they put it into a cache on your system where it will remain for a little while for quick and easy access in case it's needed again. Most browsers aren't smart enough to load things ahead of time, though. In most cases, this isn't a big problem, but when it comes to mouseovers it can be an unsightly weakness.

When a user places the cursor over one of your mouseovers, the Web browser will realize it needs to display the "on" image. If this is the first time this user accesses your site, chances are that image isn't in the cache, and must be loaded from your site. This causes a delay that can often be longer that it takes for the user to have moved the mouse back off the mouseover, having never seen that pretty light-up button you'd planned to display. Worse, if the "on" image is only partially loaded, the user may see a horrible, blurry mess in the place of the slick image you'd planned.

How do we overcome this problem? The solution is to preload the images required by the mouseover into the user's cache so that we can be sure they're available before we attempt to display them. To do this, we must make creative use of the JavaScript image object.

Up until now, we've only created image objects with the standard HTML <IMG> tag. We can, however, create them using only JavaScript. Such JavaScript-only image objects do not display on the Web page, but they do load and cache, and they have the same properties as an image object created with HTML. The strategy, then, is to create JavaScript-only image objects for every one of the image files to be used in your mouseovers. To do this for our example of the three mouseovers used in the previous section, we can replace our variable declarations with the following image declarations:

var first_off = new Image();    
first_off.src = "off1.gif";    
var first_on = new Image();    
first_on.src = "on1.gif";    
   
var second_off = new Image();    
second_off.src = "off2.gif";    
var second_on = new Image();    
second_on.src = "on2.gif";    
var third_off = new Image();    
third_off.src = "off3.gif";    
var third_on = new Image();    
third_on.src = "on3.gif";

For each image file, we create a new image object, then set its src attribute to the appropriate filename. In setting this property, the browser decides it needs to download the image file, at which point it is stored in the cache for quick retrieval when it is actually needed for display. We obey the same naming convention for the image objects as we did for the filename variables in the previous section.

Now all that's left is to adjust our activate and deactivate functions (yes again) so that they use the values of the src properties of the JavaScript-only image objects instead of the values of the variables.

function activate(imgName) {    
document.images[imgName].src = eval( imgName + "_on.src" );    
}    
   
function deactivate(imgName) {    
document.images[imgName].src = eval( imgName + "_off.src" );    
}

Finally, we can make one more adjustment to make doubly sure that the user never sees a half-loaded image. Although this preloading technique does load the mouseover images ahead of time, it is still possible for the user to trigger a mouseover before the images have completely loaded. To guard against this, we put a little "valve" in the activate and deactivate functions:

function activate(imgName) {    
if ( eval(imgName + "_on.complete") ) {    
document.images[imgName].src = eval( imgName + "_on.src" );    
}    
}    
   
function deactivate(imgName) {    
if ( eval(imgName + "_off.complete") ) {    
document.images[imgName].src = eval( imgName + "_off.src" );    
}    
}

This makes use of another property of the JavaScript image object. We already know the src property contains the URL of the image file it represents. Here we use the complete property, which is true if the image has completed loading, and false if it has not. These newly-modified versions of activate and deactivate only change the displayed image if the JavaScript-only image object responsible for preloading the new image is complete.