jQuery AJAX GIF preloader for CSS Background-Image

Question

I've been using jQuery AJAX preloading GIF images for a while now, by this code:

$("#images").html("<img id='loader' src='../img/ajax-loader.gif' />");

What i'm trying to do now is, how can i implement this same effect (a spinning wheel or similar) to preload CSS background images not just img tags?

Is this possible?

Answer 1

Once the browser has loaded an image into cache, it can retrieve it from cache for img tags or for css backgrounds. So I believe if you continue doing exactly what you are doing to preload images, then you can use that to preload background images. In other words, if you have this css:

#SomeElement { background: url('../img/whatever.gif'); }

then you can do this to preload it:

$("#images").html("<img id='loader' src='../img/whatever.gif' />");

I am not entirely familiar with your technique for preloading however, so I could be wrong...

Answer 2

for img tag, obviously you can capture onload event, but when you are dealing with css background images, I don't think and never heard capture the onload event for css background image.