Tag Archives: $(document).ready

The Difference between Document.ready and Window.onload

The onload event is a standard event in DOM, while the ready event is specific to jQuery.

The purpose of the ready event is that it should occur as soon as the document is loaded, so that code that adds functionality to elements in the page does not have to wait for everything to load.

The ready event occurs after the HTML document is loaded, while the onload event occurs after all content (such as images) is loaded.

From: https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

The Difference between $(document).ready, window.onload and $(window).load(function (){})

$(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.