Javascript event css background image loaded

Is there any way to detect that a css background image has been loaded? By using normal tags this would be easy but I need to use a css background because I'm placing divs over the image. The reason why I need to detect that this image has been loaded is that I don't want to start preload additional images before the background image is shown.

13.10.2009 14:54:47

You can force the background image to download to the client's browser using traditional javascript methods to pre-load images. Once its downloaded it becomes cached by the client and will display instantly when you edit the background-image css in javascript.

Be warned though, this is bad practice for progressive enhancement. In other words, your web page's appearance will be limited by the browser's support for javascript.

13.10.2009 14:58:26
What if the browser ignores the cache? Then the image will be loaded two times. Might not be a good solution.
Baversjo 13.10.2009 15:03:01
If the browser ignores the cache then there's no point in preloading images using javascript in the first place.
Kai 13.10.2009 15:47:59

Had the same problem. After thinking it for a while, I made an <img> below the <div> that had the background and positioned it as the background using css. Then attached the onLoad on it :)

22.01.2011 10:32:31