We’ve been working on a really fun project recently, and I was surprised at some of the browser behavior I was seeing in our testing.
I knew from past experience that the
window.load event waits to fire until all images have downloaded completely. This is why jQuery and other JS libraries implement
$(document).ready() features; so you can start doing things when the DOM is ready and not have to wait for images to download.
Armed with this knowledge, I assumed this applied to images that are specified as background images in your CSS as well. This is a (partially) incorrect assumption.
My testing indicates that Firefox fires off the onload event for the page after all inline images (
img) have loaded, but before images specified in your CSS have loaded.
Safari on the other hand waits until all of your images have loaded, including images specified as CSS background images, before kicking off the onload event.
I did some web searching before I did my tests, but didn’t find anything on this topic. Naturally, I found this as I was writing this blog post. It indicates that IE behaves similarly to Safari.
For our usage, it is actually preferable to have the onload event wait until after the images specified in the CSS have loaded, so I’m looking for a workaround or a Gecko-specific event for this for Firefox.
Time to send this blog post off to some good folks at Mozilla. I’ll update this if I get more answers.
Thanks, you just saved me some time for something I am going to be using next week.
Is there a workaround on this yet?
They claim this is fixed, but clearly it isn’t. I’ve been scouring google and forums all day for a workaround, and have found nothing.
Having onload fire before the background images are loaded makes my page look broken in firefox:
thanks! very useful info, i have to do this page that loads a very large image, and it loads through css background, so i have this LOADING clip until the image is loaded, and it works really bad in FF, is there any solution on this yet?
In addition to having your images in the CSS, couldn’t you also put them as the src of inline images in a hidden div? That way, they will load with the other inline images before the event is fired and your CSS is guaranteed to work.
Unless Firefox forgets to check the cache before loading CSS backgrounds.
Was getting frustrated why my onload didnt trigger 100% (ie7),
Really saved me some useless wasting of time ;
thanks to you and google 🙂