A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you.
Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
$( document ).ready() construct
The jQuery ready() came to my attention when I was looking at a timed modal (pop-up).
The Document Ready Event is a jQuery event. It prevents the processing of enclosed code until the document has fully loaded. i.e. a modal cannot be closed until it has been created.
The syntax of the construct shown in the example below contains more jQuery Selectors and jQuery effects.
The jQuery selectors are by id - id="modal" and id="third"
The jQuery effects are "hide" and "show"
A full list od the selectors and effects can be found on the W3C website.
