$(document).ready() in jQuery executes when the DOM (Document object model) is loaded on your page. DOM means all the html tags/script. It will not wait for the images, frames to be fully loaded. It is the earliest stage in page load process and executes a bit earlier than window.onload(), thus less time-consuming for the browser.
PAGE LOADING STAGES:
- Browser makes a request to download the page
- Raw markup and DOM is loading (does not include external sources such as images and stylesheets). DOMContentLoaded event occurs at the end of this stage and you can set your code to run at this time with $(document).ready().
- Page is fully loaded with images and stylesheets. Load event occurs at the end of this stage and you can execute your code to run at this time with window.onload(). (You rarely need to do this unless you need to work with the images or assets in your code).