Question

我有一个类似下面的导航栏..对于每个

它会在鼠标悬停和鼠标移动时更改背景颜色，并且加载那些看起来很糟糕的图像会有延迟:( 我想知道如何预加载这些图像，以便我可以节省延迟时间并使其顺利运行..

<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>

要在 mouseout 事件中显示的CSS：

#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;
}

要在鼠标悬停事件

上显示的CSS

#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;
}

顺便说一下，这是在joomla中完成的.. thankx

Answer 1

我会对CSS精灵进行一些研究，它会消除预加载图像的需要，它会使你的页面加载时间变得更快。 A List Apart有一篇关于CSS sprites的好文章。

如果你真的想要预加载那个图像，你可以创建一个非常小的像素，背景是你想要悬停的图像，这不是一个非常优雅的解决方案，但它可以完成这项工作。

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

然后在你的页面上：

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

Answer 2

正如Sam152所说，你应该使用CSS精灵。这将解决您的问题并减少HTTP请求。

简单的方法是将today.png和today-over.png放在一个图像中，一个放在另一个图像上，即98px乘50px。然后使用这个CSS：

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

注意：我删除了其他样式以保持其整洁，但请将其保留在您的代码中！

更高级，通常更好的方法是将所有菜单图像合并为一个，因此您只需要加载一个图像。你有一个490x50的图像，像这样的CSS：

#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;
}

......等等。

Answer 3

我想你可以让你的浏览器预加载这些图片，如果你把它们放在页面上隐藏的div上，就像这样：

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

Answer 4

感谢你的回复家伙.. 我发现了一种使用jquery重新加载所有图像的方法： http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

预加载图片

4 个答案: