为什么在悬停时切换图像会有轻微的延迟？

Question

您好我的网站设置了背景图片的div，所以当您将鼠标悬停在它上面时，会更改背景图片。

它工作正常但唯一的问题是切换图像时有轻微的延迟，可能是0.2秒的延迟。所以当你将鼠标悬停在它上面时，div会变为空白0.2秒，然后会出现新图像。

有谁知道造成这个问题的原因是什么？我认为它与悬停图像加载的速度有关，如果是这种情况，那么可能没有解决这个问题的方法，我将不得不忍受它。

根本没有与div关联的javascript或jQuery。

这是我的代码。

HTML：

<div class="video-button">

</div>

CSS：

.video-button {
    background: url('images/playbutton.png') center center no-repeat;
    height: 113px;
    width: 113px;
}

.video-button:hover {
    background: url('images/playbutton-h.png') center center no-repeat;
}

Answer 1

将第二个图像加载到屏幕视图外侧的另一个div中（不可见）。

加载图像后，浏览器不需要再次调用它，它将使用缓存在悬停时显示它。