I have this website where the user generates a preview by changing alot of div's background-images. The problem is that the first time I change the background-image to something else, it takes a little while for the image to load, but after that, if I change back, everything looks really smooth.

I was going to use CSS sprites to eliminate this problem, but when I tried it, some browsers almost froze since they couldn't handle that large images.

So my question is, how can I preload these specific background-images, without using CSS sprites?

**EDIT:**

I apologize if I've been unclear. What I'm creating is somewhat of a character creation screen. What I'm trying to do is that when the page loads, the user can select what race they want to be. When they do that, I want a loader to show up and I want all the images connected to that race to be preloaded. When that is complete, I want to remove the loader, and then the user can customize their character further. 

When the user customize their character, the background-images on the character div changes to one of the preloaded images. I've tried to load the images with JavaScript using the method **Rustam** described below, but I get the same result. The first time a background-image is shown, it takes a second to load.