I was trying to figure out a way to preload CSS images, by javascript or CSS. Unfortunately all the methods I found are not effective, since even tho the images are loaded, when the CSS part that contains an image which is not accessible when the site first opens, it still requires it and downloads it. I checked the net panel in firebug and it wasnt very pretty.

However these methods do work if you try to load images into an <img> tag:

CSS 2.1 Method

Using CSS 2.1 the method is pretty simple. It takes advantage of the :before and :after pseudo classes, and the content property. Although this property is pretty limited in what it can do, it does what we need.

We load the images and then we use display: none so they dont show up, but they are cached so when you load the image within a <img> tag it will show up instantly.

The benefits of this method is that it has a fairly wide acceptance among browser vendors, IE8/Firefox 2+/Google Chrome 1+/Safari 3+. For Previous IE versions you could load up a JS preload.

CSS 3.0 Method

Using the CSS 3.0 is even simpler, it takes advantage of the modifications done to the background property by being able to load multiple images with 1 element. Regardless of what the browser can support we can always create a dummy element and load all the images and then give it a display: none; we need to use in a <img> tag.

The huge downside of this method is that currently only Google Chrome 4 and Safari 4 support these improvements to the background property. Firefox is due to support them in Firefox 3.6 which at the time of this post is in beta 5 so it will be released in 2-3 weeks. IE will probably support CSS3 properties when IE9 will be available, which according to the IEBlog will happen in a year or so.

I am still looking for a way to preload CSS images into play, so when they are requested again, they will use their cached versions instead of being downloaded again.