$ (document). The difference between ready () and Window.onload

jquery $ (document). Ready () is similar to the Window.onload method in traditional JavaScript, but differs from the window.onload approach.

1. Execution time

Window.onload must wait until all the elements of the page that include the picture have been loaded before they can be executed.
$ (document). Ready () is executed when the DOM structure is drawn and does not have to wait for the load to complete.

2. Different writing numbers

Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one
$ (document). Ready () can be written multiple at the same time and can be executed

3. Simplified notation

Window.onload No simplified notation
$ (document). Ready (function () {}) can be simply written as $ (function () {});

The following are excerpts:

We often use window.onload to bind the "page load" event, but in fact the window.onload will be executed after all the page elements have been added, and if there are quite a few images on the page, we will notice the latency of the JavaScript execution.

jquery provides us with a Document.ready method to replace Window.onload.

Benefits
Although the OnLoad event guarantees absolute error, it is often too late to execute because it needs to be executed after all the page elements have been loaded.
This makes many pages of the JS function must wait for a lengthy picture loading process, often the user in the page has not been fully opened when the page has been closed ... Tragedy!
Use the Document.ready method to make the page "download, execute," and provide a better browsing experience.
Such as:
We can put the picture preloaded in the document.ready so that the pictures don't have to wait until the page is loaded and then download.

Although native JS does not provide us with a ready method, we can build one ourselves, though not as powerful as jquery, but barely enough.

Document.ready = function (fn) {//Standard browser, we listen to the domcontentloaded event to determine if the DOM has finished loading if (Document.addeventlistener) { Document.addeventlistener ("domcontentloaded", function () {Document.removeeventlistener ("domcontentloaded", FN, FALSE); }, False); }//IE we have document.documentElement.doScroll ("left") error to determine if the DOM has finished loading else {if (Document.documentElement.doScroll &  & window = = Window.top) (function () {try {document.documentElement.doScroll ("left");} catch (Error) {SetTimeout (FN, 0); Return } })(); } }

We can also invoke JS immediately after the DOM is loaded by Document.ready (our own function).
Although humble, but after all realized the Document.ready function

$ (document). The difference between ready () and Window.onload