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.
+1
A:
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.
Kai
2009-10-13 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
2009-10-13 15:03:01
If the browser ignores the cache then there's no point in preloading images using javascript in the first place.
Kai
2009-10-13 15:47:59