document.ready() vs. document.load() in Chrome's dev tools

The vertical blue line is when the DOM is fully parsed and the scaffolding is up, the DOM is ready.

The red line represents when the document's assets have all been downloaded and the screen has been painted with them, hence load().

Here you can see both those lines in action on Alice in Videoland:

The load screen hides the experience until all the background images have been loaded, being removed inside document.load().

Give the 600ms delay between ready and load, it's a good thing we had that load screen, or that first scene would have no background! for almost a second, causing a spectacular "wink!"

More on dev tools in code school's freebie course.