LinkBidScript Resources

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.

This entry was posted on Monday, November 12th, 2007 at 12:38 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.