Html 加载CSS背景图像时的延迟

我的网站有一些选项卡，当你点击它们时背景图像会发生变化

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

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

---

这里的实例：-延迟在JSFiddle的服务器上没有那么长-但仍然存在。

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

使用单个图像，而不是在

：hover

上更改背景源，只需更改背景位置即可。这样，整个图像将提前加载

例如，检查堆栈溢出的精灵表：

---

你不必把它看得如此极端，你只需要有一个图像同时具有正常和

：悬停
状态，并将其向左/向右或向上/向下移动。
一个简单的解决方案是使用javascript预加载图像。在页面的标题中包括以下内容：

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


var img=新图像（）；
img.src=”http://dummyimage.com/200x10/000000/fff"; // 背景图像