preloading image

I have a SPAN element with a background image (defined in CSS). It changes the background image when you hover on the SPAN. Problem is that it on the first hover, it's blank for an instant since it only then begins to download the image.

How can I make it so that it preloads the image? I am using an external CSS file by the way.

The way I do all my mouseovers now is pretty much close to this:
http://wellstyled.com/css-nopreload-rollovers.html
http://www.alistapart.com/articles/sprites (demo)

Other than that, you can use javascript, or have somewhere in your page reference the image as well - preferably somewhere hidden or otherwise not noticeable (ex 1x1 pixel).

Hmm,

So if I put in a 1x1 SPAN or something onto the index page only (so just the main/intro page) with the background set as the rollover image, it should work, right?

Quick fix is all I need. I need to submit this project ASAP.

Yeah, that should work. Try and position it so the image matches in with the background using background-position: x y; if you can

Otherwise they shouldn't care too much about a 1px dot.

Well, the image is a GIF anyway, so a good half of it is transparent.

Then the whole quick and dirty thing just got alot less dirty

It worked perfectly. It's a 1x1 SPAN, positioned behind another SPAN with actual content.