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.