jQuery: onload() Vs. $.ready()?

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The $(window).load() event on the window and/or body element will fire once all the content of the page has been loaded, this includes all images, scripts, etc. The jQuery method $(document).ready() is called when the webpage is loaded and interpreted just far enough to start manipulating the DOM. This method uses the jquery library to detect when the DOM is ready for JavaScript to execute.

The key difference between $(document).ready() and $(window).load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document).ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that we can immediately add functionalities or event handlers to the html elements without waiting for the entire page to load. We can have multiple document.ready() in a page but Body.Onload() event cannot.