预加载图片

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中完成的..谢谢

Answer 1

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

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

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

然后在您的页面上:

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