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

Question

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

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

PS每页最多只有2个按钮

Answer 1

Make a div with an id of preload that contains all the images you want to have show up when the user hovers over the buttons and put it anywhere in your html (it doesn't matter where) ex:

<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>

Then in your CSS, add:

#preload {display: none}

this will hide your images, but they will be loaded. Just make sure that your buttons use the same path as the ones that the preload div do, or else you will be loading images twice.

Full tutorial here:

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

Answer 2

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