Webmaster Secrets logo
Speed Up Graphic Image Load Times

By Brett McCarron, webmaster

click on the switch to see what happenslogo appears as a sign that has been turned off I wanted to design a page that involved a power switch for an amplifier company. Clicking on the switch would light up the switch and also brighten up the manufacturer's logo on the page. The problem was that there was a noticeable lag while the two new graphics loaded. I wanted to get the information into the browser cache before the second page was selected.

The solution was to include the two new graphics for page 2 on page 1. Thus the graphics would already be in the cache, so there would be no time delay when the switch was clicked. This was done by specifying a height and width of zero in the image tags for each of the two graphics I wished to preload.

To illustrate, click anywhere on the switch graphic above and watch what happens. The original illustrations were twice the size, just in case you are wondering why the fonts are so small on the power switch.

The <IMG SRC="imagex.gif" HEIGHT=0 WIDTH=0> tag was used for each. Even though they have a width and height of zero, they are still placed in the cache.

The image is a clickable link that calls a second page. Be sure that the "off" and "on" graphics are placed in the same position on both pages so that it doesn't spoil the effect for the viewer. If you can place the graphic high enough on the page to avoid scrolling, so much the better. preload image 1preload image 2

Webmaster Secrets

Copyright © 1996-2017 Blamepro.com
Trademarks and copyrights used herein are the property of their respective holders.