Javascript event css background image loaded

cssjavascript-events

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.

Best Answer

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.