Lots of high-res images can really spruce up a Web site. Butthey can also slow it down—images are files, files use bandwidth, and bandwidthis directly related to wait times. It’s time you get yourself an education onhow to speed things up with a little trick called image preloading.
Some browsers try to mitigate this problem by storing theimages in the local cache so that subsequent calls to the image are satisfiedimmediately…but there’s still a delay the very first time the image isneeded. Preloading is a technique where the image is downloaded to the cachebefore it’s needed. That way when the image is really needed it can beretrieved from the cache and displayed immediately.
The Image() object
Note that the image tag does not itself handle onMouseOver()and onMouseOut() events, which is why the <img> tag in the example abovehas been enclosed in an <a> tag, which does include support for thoseevent types.
Loading multiple images with arrays
In the above example, you define a variable i and an Image() object cleverly named imageObj. You then define a new arraycalled images, where each arrayelement stores the source of the image to be preloaded. Finally, you create afor() loop to cycle through the array and assign each one of them to theImage() object, thus preloading it into the cache.
The onLoad() event handler
Of course, you can also create an array of images and loopover it, preloading each one and keeping track of the number of images loadedat each stage. Once all the images are loaded, the event handler can beprogrammed to take the browser to the next page (or do any other task).
Preloading and Multi-State Menus
Now, how about using all the theory you just learned in anactual application? This next one is a little piece of code I recently hadoccasion to write – a menu bar consisting of buttons (image links), each ofwhich can be in any one of three states: normal, hover and click. Since thebuttons have multiple states, it is necessary to use image preloading to ensurethat the menu responds quickly to changes in its state. The code in Listing A illustrates this.
The HTML code in Listing A sets up a menu bar consisting offour buttons, each of which has thee states: normal, hover, and click. Therequirements are as follows:
- On mouse move over a button in normal state, it changes to hover state. On mouse out, it goes back to normal state.
- On mouse click on a button, it changes to its click state. It remains in this state until another button is clicked.
- If a button is clicked, no other button may be in click state. Other buttons can only be in their hover or normal states.
- Only one button may be clicked at a time.
- Only one button can be in hover state at a time.
The first task is to set up arrays holding the images foreach state of the menu. The <img> elements corresponding to these arrayelements are also created in the HTML document body, and named sequentially.Note that array values are indexed starting from 0, while the corresponding<img> elements are named starting from 1—this gives rise to certaincalculation adjustments in the latter half of the script.
The preloadImages() function takes care of loading all theimages into the cache, so that response time on mouse movement is minimal. Afor() loop is used to iterate over the images created in the first step andpreload each one.
The resetAll() function is a convenient way to reset all theimages to their normal state. This is necessary because, when an item of themenu is clicked, all other items in the menu must revert to their normal statebefore the clicked item can change to its click state.
The setNormal(), setHover() and setClick() functions takecare of changing the source of a particular image (image number passed asfunction argument) to its normal, hover, or click state respectively. Sinceimages which are clicked must remain in that state until another image isclicked (see rule #2), they are temporarily immune to mouse movements; thus,the setNormal() and setHover() functions include code to only change a button’sstate if it is not already in its click state.