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

The most basic difference

1. Execution time

Window.onload must wait until all elements of the page including the picture have been loaded before they can be executed.
$ (document). Ready () is executed after the DOM structure has been drawn and does not have to wait until the load has finished.

2. Different number of writes

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 wording

Window.onload did not simplify the wording
$ (document). Ready (function () {}) can be simply written as $ (function () {});

As an example of a browser loading document, the browser adds events to the DOM element through JavaScript after the page is loaded. In regular JavaScript code, the Window.onload method is usually used, whereas in jquery, the $ (document) is used. Ready () method.

$ (document). The Ready () method and the Window.onload method have similar functions, but there are differences in the timing of execution. The Window.onload method executes when all elements in a Web page (including the associated file of the element) are fully loaded into the browser, that is, JavaScript can access any element of the Web page at this time. The event handlers that are registered through the $ (document). Ready () method in jquery can be invoked when the DOM is fully ready. At this point, all elements of a Web page are accessible to jquery, but that does not mean that the files associated with those elements are already downloaded.

For example, there is a large gallery web site that adds some behavior to all the pictures in a Web page, such as clicking a picture to hide or display it. If you use the Window.onload method to process, the user must wait until each picture is loaded before they can operate. If you use the $ (document). Ready () method in jquery, you can do so as long as the DOM is ready and you don't have to wait for all the pictures to download. Obviously, parsing a Web page into a DOM tree is faster than loading all of the associated files in a Web page.

It is also important to note that, because the events registered within the $ (document). Ready () method are executed as long as the DOM is ready, the associated file of the element may not be downloaded at this time. For example, a picture-related HTML download is complete and has been parsed into a DOM tree, but it is likely that the picture has not yet been loaded, so properties such as the height and width of the picture are not necessarily valid at this time. To work around this problem, you can use another method in jquery about page loading--load () method. The load () method binds a handler function in the OnLoad event of the element. If the handle function is bound to the Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the processing function 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 }

Assuming 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 two () { Alert ("two"); }

When the Web page is loaded, call the one and two functions individually through JavaScript code:

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

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

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

To achieve the effect of two function sequential triggers, you can only create a new JavaScript method to implement the JavaScript code as follows:

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

Although this code can solve some of the problems, but still can not meet certain requirements, such as a number of JavaScript files, each file needs to use the Window.onload method, in this case, the above-mentioned method of writing code can be very cumbersome. You can refer to JavaScript sharing the OnLoad event, while JQuery's $ (document). The Ready () method handles these situations well, each time the $ (document) is invoked. The Ready () method appends new behavior to 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 two () { Alert ("two"); } $ (document). Ready (function () { One (); }); $ (document). Ready (function () { Two (); })

After the code is run, the string "One" dialog box pops up and the string "Two" dialog box pops up