The difference between Document.ready and window.onload

Functionjquery Document Browser Scripting CSS

Page loading completed there are two kinds of events, one is ready, indicating that the document structure has been loaded complete (not including pictures and other non-text media files),

The second is onload, which indicates that all elements, including pictures and other files, are loaded and completed.

That's how you start writing scripts with jquery.

[HTML]View Plaincopyprint?

1. $ (document). Ready (function () {
2. Do something
3. })

$ (document). Ready (function () {         //do something      })

In fact, it is equivalent to:

[HTML]View Plaincopyprint?

1. $ (). Ready (function () {
2. Do
3. })

$ (). Ready (function () {  //do  })

[HTML]View Plaincopyprint?

1. $ (function () {
2. Do
3. })

$ (function () {  //do      })

This is the method of jquery Ready (), which has the function or meaning that the DOM can be manipulated when the DOM is loaded.

In general, the first page response loading order is, domain name resolution-loading html-loading JS and css-loading pictures and other information

Then Dom ready should be able to manipulate the DOM between "Loading JS and css" and "Loading pictures and other information".

With native JS we usually use the onload such as:

[HTML]View Plaincopyprint?

1. window.onload=function() {
2. Alert ("Window.onload");
3. }

Window.onload=function () {      alert ("Window.onload");  }

This is the DOM load, his role or meaning is: After the document is loaded, you can manipulate the DOM, the document includes loading pictures and other information.

Then DOM load is the "loading of pictures and other information" in the order in which the page responds to loading, and the DOM can be manipulated.

The Window.onload method is not executed until all the elements in the Web page, including all associated files of the element, are fully loaded into the browser.

This approach has a great advantage: no need to consider the order in which DOM elements are loaded.

The event handlers registered through the $ (document) method in jquery can be called whenever the DOM is fully ready, such as a picture as long as the label is complete,

Do not wait for this picture to be loaded, you can set the image width of the property or style, and so on.

This is better than the OnLoad () event: $ (document). Ready () to manipulate the DOM elements of the page when the page is not fully downloaded.

Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one is executed and the latter overrides the former

$ (document). Ready () can be written multiple at the same time and can be executed sequentially

$ (document). Ready () takes precedence over window.onload execution