Document Ready VS Load Events

$(document).on(‘ready’, handler)

// executes when HTML-Document is loaded and DOM is ready. Assets like images maybe still are missing. The DOMContentLoaded event is fired.

$(window).on(“load”,handler)

// executes when complete page is fully loaded, including all frames, objects and images;

You can see what assets are loaded before and after a document is ready by viewing the Network panel in Chrome’s inspector. The Load event is fired.

network

The blue line indicates when the document is ready and the red line when the window (page / document) has loaded.

At the bottom, you can see how long it took for the document to be ready (614 ms) and how long for the window to load (3.81 s).