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!"
Written by Rachel Nabors
Related protips
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside