Preloading roll-over images with CSS

[SkinnerW]

Hi everyone,

Have you ever noticed on some websites when you hover mouse over navigation elements it blinks for a second and after short delay it changes background image? I have been seen this a lot lately...

The problem is that some time ago most of roll-over elements were controlled by javascript which used "onLoad" command but now more and more webmasters using CSS to control roll-overs.
Background images for "hover" state are not loaded initially that is why you see this little delay - image start loading after you hover mouse over that element.

Here is a little simple trick to avoid this delay.

In the end of your page right before closing </body> tag insert code for your roll-over background image in the following format:

<img src="exact_image_path/menu_hover_image.gif" class="preload" alt="" />

where: exact_image_path - is location of your images folder and menu_hover_image.gif - is the name of background image for "hover" state of your roll-over element.

Now add this line to your CSS file:

img.preload
{
display: none;
}

That's it!

Now these "hover" background images will load in the background while page is accessed first time and will be ready to display without delay.

The images will be pre-loading in the background so it will not affect your page loading time.
Same way you can pre-load any other images you want to have ready when particular page is accessed...

I hope you find this little tutorial helpful and I will be posting more tutorials on my blog shortly...

[Geoserv]

Good post,

Thanks
Geoserv.

[Scripter]

Ah indeed.
Thanx for the input skinner

[smeagain]

Very neat, I like that.

[BenjArriola]

Excellent simple workaround! Although I don't use much image rollovers in the way I used to do it and I use CSS Spritenavs and also Suckerfish Dropdowns, I see this technique still useful in Lightbox JS galleries where you can preload the larger image so when the thumbnail is clicked, the larger one will appear instantly.