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:
Quote:
|
<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:
Quote:
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...