加载CSS背景图片时延迟

Question

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

然而，当我在DOM加载后第一次将鼠标悬停在标签上时，在悬停图像显示之前会有一点延迟，从而导致刺耳的效果。

我不知道如何解决这个问题，任何想法？ ：）

这里的实例：http://jsfiddle.net/timkl/fjupq/ - JSFiddle服务器上的延迟时间不长 - 但它仍然存在。

Answer 1

解决方法是使用精灵而不是单独的图像。

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

您使用单张图片，而不是更改:hover上的背景来源，只需更改背景位置即可。这样，整个图像就会被预先加载。

例如，查看Stack Overflow的精灵表：

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

你不必把它带到这个极端，你可以让一个图像同时具有正常状态和:hover状态，并将其向左/向右或向上/向下移动。

Answer 2

一个简单的解决方案是使用javascript预加载图像。将其包含在页面的HEAD中：

<script type="text/javascript">
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image
</script>