Checking document.ready and document.load events in Chrome developer tools
In Chrome developer tools, using the
Network tab, you can easily see when the document.ready() and document.load() events fire.
If you open up the
Network tab and refresh the page, you'll see several assets loading up.
The vertical blue line indicates that the
document.ready() event has fired. This happens once the DOM has been fully parsed.
The vertical red line indicates that the
document.load() event has fired. This happens when all of the document's assets have been downloaded and the screen has been painted with them.