javascript - 为什么onhover css背景图像在第一次没有正确加载？

Question

加载页面后，我们使用大图像作为 div 的背景如果我们将鼠标悬停在该 div 上，我们会空白几秒钟，这是为什么？我们可以为此提供解决方案吗？我需要一个不使用精灵图像的解决方案，因为我需要以响应方式更改该图像

.hexagonal{
  background: url(/images/service-bg.jpg) no-repeat;
}
.hexagonal:hover {
  background: url(/images/service-bg-over.jpg) no-repeat;
}

<div class="hexagonal">
  <ul>
    <li>test1</li>
    <li>test1</li>
  </ul>
</div>

Answer 1

因为这张图片很大，加载它需要时间，这就是为什么当你悬停元素时你会看到几秒钟的空白。
为了修复它，您必须在悬停时预加载所需的图像。有一些方法可以做到这一点，并且在 JS 解决方案的评论中有一些建议，但我认为使用 CSS 方式更合适，因为您不需要 JS 部分。
为了使用 CSS 预加载图像，您可以将 body 的 after 伪元素的内容设置为这些图像，然后隐藏该元素。

body::after{
   position:absolute; 
   width:0; 
   height:0; 
   overflow:hidden; 
   z-index:-1; /* hide images */
   content: url(/images/service-bg-over.jpg);   /* load images */
}