问题
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:
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.
回答2:
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 :)
来源：https://stackoverflow.com/questions/1560750/javascript-event-css-background-image-loaded