How to preload css :hover background images

Question

I am making a Wordpress website and some the buttons have a background image, and the image changes on hover. This is done through just simple CSS. When the user first goes to the page and hovers over a button, the space goes blank until the new image loads.

What is the best way to load all the images so it has a smooth transition.

P.S There is only max 2 buttons per page

Answer 1

You can use "Sprite" images for your buttons. Thus all button, normal bg and hover bg will remain in an image. And that image will load initially with the button normal state. For hover, you have to use same sprite image, but different background-position in css.

Answer 2

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/