CSS Preload images (hover backgrounds)

While building a one page site with many images on it as buttons to click (div backgrounds), I realized that the hover picture takes some time to load and I can imagine what that could mean for someone who has slower connection. What happens in this case is that if you hover over an image, it will not display the hover background image for some time, so you'll just see a white space instead of the image.This doesn't look good and is not very user friendly, thus I needed to figure out a way to preload hover images making sure they're loaded before you hover over the buttons and thus the hover image appears right away or at least faster.

While looking for a solution, I found 2 posts addressing the same situation from a different point of view:

1 Pre-load images using CSS (such as hover images)

2 Jeffrey Zeldman Presents: The Daily Report (scroll down to the middle of the page or look for the word "preload").

I used the first one and it seems to be successful. Also I placed the preload divs at the beginning of the page, however don't forget that it slows down the overall load time of you page but also makes sure that when your users hover, they really see that image changing into your hover image and not a white space. Up to you to decide, what is more important. ;)