Do browsers preload hidden CSS background images?

I've been told t开发者_开发知识库hat they do, but once the element with the CSS background image is made visible, the image seems to take time to load as if it's not cached.

Should I be preloading these, or doing something else to ameliorate the slowness when they're shown?

The solution i use, which is the common one nowadays is to use sprites as background-images;

this way the entire image is loaded, and all you need to do is to move the background position to see different areas

Here is a Tutorial on how to use them.

And a little example:

ul li {
   width: 50px;
   height: 20px;
   background: url(sprite.png) no-repeat 0px 0px;
}

ul li:hover {
   background-position: 0px -20px;
}

in this example the list item will have one background image, a button forexample, and when u hover over it the background is shifted 20px up to show the different version.