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

$ (document) Ready () and window onload on the surface of the page load we go to execute a function or action, but in the specific details on the $ (document) Ready () and window onload is still different.

The most basic difference

1. Execution time

Window.onload must wait until all elements of the page, including pictures, Flash, and so on, are 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.

such as <p> picture video </p> (assuming the page has only this one label), window.onload must wait until all content of the <p> tag is loaded to execute, while $ (document). Ready () As long as the DOM structure is finished, it can be executed only by scanning to <p></p> without having to control its contents.

2. Different writing numbers

Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one is executed (in the order structure, the last one is executed).
$ (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 browser loads the document as an example, and after the page is loaded, the browser adds events to the DOM element via JavaScript. In regular JavaScript code, the Window.onload method is typically used, whereas in jquery, the $ (document) method is used.

$ (document). The Ready () method has similar functionality to the Window.onload method, But there is a difference in the timing of the execution. The Window.onload method is not executed until all elements in the Web page (including the associated file of the element) are fully loaded into the browser, that is, JavaScript can now access any element in the Web page. The event handlers registered through the $ (document) method in jquery can be called when the DOM is fully ready. At this point, all the elements of the Web page are accessible to jquery, but that does not mean that the files associated with these elements have been downloaded.

For example, there is a large gallery site that adds some behavior to all the pictures in the page, such as clicking the picture to hide or show it. If you use the Window.onload method to process, the user must wait until each picture is loaded before it can be manipulated. If you use the $ (document) method in jquery to set it up, you can do so as soon as the DOM is ready, without waiting for all pictures to be downloaded. Obviously, parsing a Web page into a DOM tree is much faster than loading all the associated files in a Web page.

It is also important to note that because the event is registered within the (document). Ready () method, as long as the DOM is in place, the associated file for the element may not have been downloaded at this time. For example, the image-related HTML download is complete, and has been parsed into the DOM tree, but it is possible that the picture has not been loaded, so the height and width of the case properties such as this is not necessarily valid. To solve this problem, you can use another method of--load () in jquery about page loading. The load () method binds a handler function in the OnLoad event of the element. If the handler is bound to a Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the handler is bound to the element, it is triggered after the element's contents have been loaded. the jquery code is as follows:

The code is as follows	Copy Code
$ (window). Load (function () { Writing code })

Equivalent to the following code in javascript:

The code is as follows	Copy Code
Window.onload = function () { Writing code }

Suppose there are two functions in the Web page, the JavaScript code is as follows:

The code is as follows	Copy Code
function One () { Alert ("one"); } function () { Alert ("both"); }

Once the page has been loaded, the one function and the two function are called by JavaScript code, respectively:

The code is as follows	Copy Code
Window.onload = one; Window.onload = both;

However, when you run the code, you find that only the string "Two" dialog box appears.

The reason that the string "One" dialog box cannot be ejected is that JavaScript's onload event can only be saved in a reference to a function at a time, and it automatically overwrites the previous function with the following function, so you cannot add new behavior to the existing behavior.

To achieve the effect of two function order triggering, only create a new JavaScript method to implement, the JavaScript code is as follows:

The code is as follows	Copy Code
Window.onload = function () { One (); Both (); }

While this code can solve some problems, it does not satisfy certain requirements, such as having multiple JavaScript files, each of which requires the Window.onload method, which can be cumbersome to write in the way described above. You can refer to JavaScript to share the onload event, while JQuery's $ (document). The Ready () method handles these cases well, each time the $ (document) is called. The prepare () method appends new behavior to the existing behavior. These behavior functions are executed sequentially according to the order in which they are registered. For example, the following jquery code:

The code is as follows	Copy Code
function One () { Alert ("one"); } function () { Alert ("both"); } $ (document). Ready (function () { One (); }); $ (document). Ready (function () { Both (); })

After you run the code, the string "One" dialog pops up, and the string "One" dialog box pops up.

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