The quick way to preload images
If you use background images for hover effects with CSS (for example links hover effects) in IE you don’t get a nice effect, because the "mouseover" image is always loading, creating a "gap". So it’s good to have the "mouseover" images preloaded. There are numerous of ways to preload images, but usually what I’m doing is loading those images in a hidden layer. For example: if you have a css:
a.menu { background: transparent url(‘menu_off.gif’) no-repeat left top }
a.menu:hover { background-image: url(‘menu_on.gif’) }
you’ll want to have the images menu_off.gif and menu_on.gif preloaded. The way I’m doing it is by adding to the top of my webpage right after the <body> tag the following code
<div style="display:none; visibility:hidden; position:absolute; left: -3000px;">
<img src="menu_off.gif"/>
<img src="menu_on.gif"/>
</div>
This will put the two images loaded in a hidden layer and thus keeping them preloaded. And because this layer is right at the beginning of the page, you’ll have the images preloaded first.
The best technique I’ve found for accomplishing this is to use one image for both the on and off states and change the background-position on hover.