Chris Jennings

Recently while developing a blog for author Tim Ferriss, I implemented a CSS based menu that used background images for the visual navigation. One major problem when using roll-over menus, no matter if it’s javascript or CSS, is the fact that the browser will not load the “hover” image until it is initially hovered over with the mouse. Until recently I have made use of a few lines of javascript to pre-load the images, however, due to the fact that Tim’s book isn’t necessarily targeted towards tech-savvy people, there’s a good chance that a few older browsers will make their way onto his site.

The Solution

To achieve the same effect, without all of the Javascript bulk, I simply made a new class in my stylesheet:

.invisible {display: none; }

Then, I loaded all of my images onto my page (they can be anywhere). Then, I simply set their class to “invisible”. That’s all there is to it. No more loading flickers for Tim’s navbar. woot.