预载:hover背景图
我们经常会遇到鼠标划过链接时需要改变背景图的情况，其实做起来挺简单，就是给链接的:hover伪类设置一张背景图。但这是问题便出现了，设置在:hover下的背景图并没有随html文档一同被载入，而是在我们把鼠标放在链接上时才开始像服务器发出请求。
例如，如果我们在一个a链接上写了以下样式：
a.test {
background: url(images/bgImg.png) no-repeat;
}
a.test:hover {
background: url(images/bgImgHover.png) no-repeat;
}
那么当用户把鼠标移到a链接上时，原先设置在a上的背景图消失了，而设置在:hover上的背景图bgImgHover.png又正在载入，这是就会出现没有背景图的瞬间，这种用户体验是很糟糕的，特别是当背景图比较大时，可能还不止是一瞬间，用户需要等上一段时间才能见到背景图。
解决这个问题的办法是预载背景图，就是说强迫设置在hover上的背景图随HTML文档一起被载入，这样当用户的鼠标放到链接上时:hover上的背景图已经被下载到本地，也就不会出现上述的情况。下面提供几种方法：
方法一：采用CSS Sprite技术
CSS sprite技术是一种将许多小背景图合成到一张大图以减少http连接数从而提升页面载入速度的技术。用过YSlow的人都知道Yahoo把减少HTTP连接数列为提高网站速度效率的第一要素。但此处采用sprite是为了解决预载:hover背景图的问题，将:hover背景图与任意一张非hover、非active、非focus下的背景图合成到一张图片，这样图片就会随html文档一起被载入。
方法二：将需要预载的背景图设置在文档内任意一个元素上，并通过backgroud-position让其不可见
文档内有如下html代码：
<li class="test"><a href="#">test</a></li>
css代码如下：
.test {
/* 把li的背景设置成这张需要预载的图片，但是让其不可见 */
background:url(images/bgImgHover.png) no-repeat -999px -999px;
}
.test a {
background:url(images/bgImg.png) no-repeat; /* 正常状态下的背景图 */
}
.test a:hover {
background:url(images/bgImgHover.png) no-repeat; /* hover状态下的背景图 */
}
由于在li上设置了bgImgHover.png这张背景图，尽管我们看不到它，但是图片在文档载入之前就已经下载到了本地。
方法三：用JavaScript预载图片
有些时候假如我们需要预载的图片有十几张，并且由于种种原因我们无法使用Sprite的时候，用JavaScript便成为更好的选择。
<script type="text/javascript">
for ( var i = 1; i <= 15; i++ ) ( new Image() ).src = './images/bgImg' + i + '.png';
</script>
这样会预载从bgImg1.png,bgImg2.png…直到bgImg15.png。