css - 如何预加载 css :hover background images

Question

我正在制作一个 Wordpress 网站，一些按钮有背景图像，并且图像在悬停时会发生变化。这是通过简单的 CSS 完成的。当用户第一次进入页面并将鼠标悬停在按钮上时，空间会变为空白，直到新图像加载。

加载所有图像的最佳方法是什么，使其具有平滑过渡。

P.S 每页最多只有 2 个按钮

Answer 1

制作一个 id 为 preload 的 div，其中包含您希望在用户将鼠标悬停在按钮上时显示的所有图像并将其放在 html 中的任何位置(无论在哪里)
前任:

<div id="preload">
   <img src="path/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="path/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="path/image-03.png" width="1" height="1" alt="Image 03" />
</div>

然后在你的 CSS 中，添加:

#preload {display: none}

这将隐藏您的图像，但它们会被加载。只需确保您的按钮使用 相同的路径正如预加载 div 所做的那样，否则您将加载图像两次。

完整教程在这里:

http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/