$(document). Ready: it is executed after the DOM structure is drawn, and there is no need to wait until the loading is completed. This means that after the DOM tree is loaded, it will be executed without waiting for the pictures or other external files in the page to be loaded. And can write multiple. Ready.

window.onload : all elements of the page are loaded, including pictures and other elements. It can only be executed once. Therefore, the execution time of $(document). Ready is earlier than window.onload . And can write many, look at the code:

//The following code does not execute correctly. 
window.onload = function()
{ 
alert(“text1”); 
}; 
window.onload = function()
{ 
alert(“text2”); 
}; 
//The result is only the second output Can write more than one at the same time 
// The following code is executed correctly. 
$(document).ready(function()
{ 
alert(“Hello World”); 
}); 
$(document).ready(function()
{ 
alert(“Hello again”); 
}); 
//The results output both times

If you need to get the attribute values of DOM binding elements, it is best to use window.onload , because it is executed after all the elements are loaded. If you use $(document). Ready, the DOM has been loaded, but the element attributes bound to the DOM have not been loaded, so the attributes do not take effect. To solve this problem, you can use the load () method, another page loading method in jQuery. The load () method binds a handler to the onload event of the element. If the processing function is bound to a window object, it will be triggered after all the contents (including windows, frames, objects and images) are loaded. If the processing function is bound to an element, it will be triggered after the contents of the element are loaded.

//Jquery Code： 
$(window).load(function ()
{ 

});
//is equivalent to the following code in JavaScript 
Window.onload = function ()
{
 
}

Conclusion:

1. window.onload=function () {} is to wait for all content to be loaded, such as image, content, JS, CSS, etc.

2. $(function () {}) is to wait for the DOM to be loaded (my understanding is after the label is drawn), and it can be executed even when the picture is not loaded.

3. $(function () {}) is the abbreviation of $(document). Ready (function () {}). The function is the same.

4. $(window). Load (function () {}) is executed after all the contents are loaded.

5. Whether it’s the external chain JS or the JS in the page window.onload Only the last one is executed

6. $(window). Load (function () {}) can have more than one, and all of them are executed in sequence.