将鼠标悬停在“禁用”图标上时，如何防止显示“热”图标的延迟？

Question

当用户将鼠标放在“禁用”（灰色）图标上时，我使用以下CSS代码显示“热门”（彩色）图标：

.pic a:link { background: url(http://www.mydomain.com/media/disabled/pic.png) top center no-repeat; }
.pic a:hover { background: url(http://www.mydomain.com/media/hot/pic.png) top center no-repeat; }
.pic a:active { background: url(http://www.mydomain.com/media/normal/pic.png) top center no-repeat; }

它工作正常，但有一个烦恼：用户第一次将鼠标放在“禁用”图标上时，在出现“热门”图标之前会略有延迟。所有后续鼠标悬停都会显示“热”图标，没有延迟。有没有办法可以防止在第一次鼠标悬停时发生这种延迟？

Answer 1

这是一个常见问题，有三种解决方案：

1. 使用JavaScript预加载文件。
2. 使用其他可见元素预加载文件，但隐藏了一些涉及z-ordering的技巧。
3. 使用CSS Sprites：http://css-tricks.com/css-sprites/

Answer 2

使用技术预加载背景图像。您看到的延迟是由于浏览器在用户将鼠标悬停在图像上之前没有抓取图像。

这是article on a couple techniques for doing this

Answer 3

CSS Sprites是解决此问题的正确方法。它不仅可以解决这个问题，还可以减少要下载的图像数量，从而加快网站的初始加载速度。特别适用于移动客户端。