Question

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

加载所有图像以获得平滑过渡的最佳方式是什么。

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

Answer 1

您可以为按钮使用“精灵”图像。因此，所有按钮，普通bg和悬停bg将保留在图像中。并且该图像最初将以按钮正常状态加载。对于悬停，您必须使用相同的精灵图像，但在css中使用不同的背景位置。

Answer 2

创建一个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/

如何预加载css：悬停背景图片

2 个答案: