0

当用户将鼠标悬停在“禁用”（灰色）图标上时，我正在使用以下 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; }

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

4

3 回答 3

2

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

  1. 使用 JavaScript 预加载文件。
  2. 使用另一个可见元素预加载文件，但隐藏了一些涉及 z 排序的技巧。
  3. 使用 CSS 精灵：http ://css-tricks.com/css-sprites/
于 2012-11-14T01:12:58.497 回答
0

使用一种技术来预加载背景图像。您看到的延迟是由于浏览器直到用户将鼠标悬停在它上面才获取图像引起的。

这是有关执行此操作的几种技术的文章

于 2012-11-14T01:14:27.307 回答
0

CSS Sprites 是解决这个问题的正确方法。它不仅解决了这个问题，而且还通过减少要下载的图像数量来加快网站的初始加载速度。对移动客户端特别有用。

于 2012-11-14T01:22:59.830 回答