html - 加载 CSS 背景图片时出现延迟

Question

我的网站有一些标签，当您点击它们时，背景图像会发生变化。

但是，当我在加载 DOM 后第一次将鼠标悬停在选项卡上时，在悬停图像显示之前会有轻微的延迟，从而导致不和谐的效果。

我不知道如何解决这个问题，有什么想法吗？ :)

此处为实例:http://jsfiddle.net/timkl/fjupq/ - 延迟在 JSFiddle 的服务器上没有那么长 - 但它仍然存在。

Answer 1

解决这个问题的方法是使用 Sprite 而不是单独的图像。

• http://css-tricks.com/css-sprites/

您使用单个图像，而不是在 :hover 上更改背景源，您只需更改背景位置。这样，整个图像就被提前加载了。

例如，查看 Stack Overflow 的 sprite 表:

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

你不必把它带到这个极端，你可以只拥有一个同时具有正常和 :hover 状态的图像，然后将它移动到左/右或上/下.