Question

i ve a navigation bar like the one below..for each

it changes the background color on mouseover and mouseout and there is a lag to load those images which looks awful :( i wanna know how to preload those images so that i can save that lag time and make it work smoothly..

<ul class="nav">
 <li class="Today"><a href="/" class="Active"/></li>
 <li class="Hot"><a href="/hot" class=""/></li>
 <li class="New"><a href="/new" class=""/></li>
 <li class="Categoies"><a href="/cat" class=""/></li>
 <li class="Terms"><a href="/terms" class=""></a></li>
</ul>

the css to display on mouseout event :

#nav .Today a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/today.png) no-repeat scroll left top;
border:0 none;
height:25px;
text-decoration:none;
width:98px;
}

the css to display on mouseover event

#nav .Today .Active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/today-over.png) no-repeat scroll left top;
border:0 none;
height:25px;
text-decoration:none;
width:98px;
}

BTW, this is done in joomla.. thankx

Answer 1

thanks for ur replies guys.. i found a way to reload all the images using jquery here: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Answer 2

I would do some research into CSS sprites, it will negate the need to preload your images and it will make your page load times go much faster. A List Apart has a good article on CSS sprites.

If you really wanted to preload that one image you can create a really tiny pixel with a background of the image you wanted to hover over, it s not a very elegant solution but it would do the job.

#preload
{
    background-image:url(../images/today-over.png);
    width:1px;
    height:1px;
    position:absolute;
}

And then on your page:

<div id="preload"></div>

Answer 3

As Sam152 said, you should use CSS sprites. This will solve your problem as well as cutting down on HTTP requests.

The simple way is instead of today.png and today-over.png put them into one image, one above the other, that is 98px by 50px. Then use this CSS:

#nav .Today a {
    background: transparent url(../images/today.png) no-repeat scroll left top;
}
#nav .Today .Active {
    background-position: left bottom;
}

Note: I removed the other styles to keep this looking clean, but keep those in your code!

The more advanced, and generally better, way is to merge all the menu images into one, so you only have one image to load. You d have a 490x50 image, and CSS like this:

#nav .Today a {
    background: transparent url(../images/today.png) no-repeat scroll 0 0;
}
#nav .Today a.Active {
    background-position: 0 -25px;
}
#nav .Hot a {
    background: transparent url(../images/hot.png) no-repeat scroll -98px 0;
}
#nav .Hot a.Active {
    background-position: -98px -25px;
}

...and so on.

Answer 4

I suppose you could make your browser preload those images, if you would place them on a hidden div on your page, like this:

<div style="display:none;"> ... the images ... </div>

友情链接