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
2 ОТВЕТА
РЕШЕНИЕ

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.

1
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 :)

0
22.01.2011 10:32:31