Can be executed after the DOM is loaded (before window.onload). .ready() can appear multiple times in the same page
The main difference between the two: Window.onload=function (){}:
The window.onload event is fired when a document is completely downloaded into the browser. This means that all elements on the page are operable for js, which means that all elements on the page will be executed after loading. This situation is very beneficial for writing functional code, because the order of loading is not a concern.
$(document).ready(function (){});
Will be called when the DOM is fully ready and ready to use. While this also means that all elements are accessible to the script, it does not mean that all associated files have been downloaded. In other words, the code executes when the HTML is downloaded and parsed into the DOM tree.
Using $(document).ready(function (){}) is generally better than using an onload event handler, but it has to be clear, because the backing file may not have loaded, so something like the height and width of the image The properties of are not necessarily valid at this time.
Note: There will be problems with the method of putting js at the bottom of the page and the method of using defer=”defer”. It is better to use the $(document).ready(function (){}) function.