Differences between $ (document). ready () and window. onload in Jquery

$ (Document ). ready () and window. onload is a function or action that is executed when a page is loaded, but in details $ (document ). ready () and window. onload is different. I will introduce it later.

Basic Differences

1. execution time

Window. onload can only be executed after all elements including images in the page are loaded.
$ (Document). ready () is executed after the DOM structure is drawn. You do not have to wait until the loading is complete.

2. different numbers of codes

Window. onload cannot be written at the same time. If there are multiple window. onload methods, only one
$ (Document). ready () can be compiled at the same time, and can all be executed.

3. Simplified writing

Window. onload is not simplified
$ (Document). ready (function () {}) can be abbreviated to $ (function (){});

Take a browser to load documents as an example. After the page is loaded, the browser adds an event to the DOM element through JavaScript. In general JavaScript code, the window. onload method is usually used, while in jQuery, the $ (document). ready () method is used.

The $ (document). ready () method and the window. onload method have similar functions, but they differ in execution timing. The window. onload method is executed only after all the elements (including the associated files of the elements) on the webpage are fully loaded into the browser. That is, JavaScript can access any elements on the webpage. The event handler registered using the $ (document). ready () method in jQuery can be called when the DOM is fully ready. At this time, all elements of the webpage are accessible to jQuery, but this does not mean that the files associated with these elements have been downloaded.

For example, a large image library website adds certain behaviors to all images on a webpage, such as hiding or displaying an image after you click it. If you use the window. onload method for processing, you must wait until each image is loaded. If you use the $ (document). ready () method in jQuery to set it, You can operate it as long as the DOM is ready, and you do not need to wait until all the images have been downloaded. Obviously, parsing a webpage as a DOM tree is much faster than loading all associated files on the webpage.

Note that the event registered in the $ (document). ready () method will be executed as long as the DOM is ready, so the associated file of the element may not be downloaded. For example, HTML related to images has been downloaded and parsed as a DOM tree, but it is very likely that the image has not been loaded, so the attributes such as the height and width of the sample image are not necessarily valid at this time. To solve this problem, you can use the load () method in JQuery, which is another method for page loading. The load () method binds a handler to the onload event of the element. If the processing function is bound to a window object, it is triggered after all the content (including the window, frame, object, and image) is loaded. If the processing function is bound to an element, it is triggered after the element content is loaded. The jQuery code is as follows:

The Code is as follows:	Copy code
$ (Window). load (function (){ // Write code })

It is equivalent to the following code in javaScript:

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

Assume that the webpage has two functions, and the JavaScript code is as follows:

The Code is as follows:	Copy code
Function one (){ Alert ("one "); } Function two (){ Alert ("two "); }

After the webpage is loaded, use Javascript code to call one function and two function respectively:

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

However, after running the Code, only the "two" dialog box is displayed.

The reason why the string "one" dialog box cannot be popped up is that the JavaScript onload event can only be stored in one function reference at a time, and it will automatically overwrite the previous function with the following function, therefore, new behaviors cannot be added to existing behaviors.

To achieve the trigger of two functions in sequence, you can only create a new JavaScript method. The JavaScript code is as follows:

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

Although this code can solve some problems, it still cannot meet certain requirements. For example, if there are multiple JavaScript files, each file needs to use window. onload method. In this case, it is very troublesome to write code using the method mentioned above. You can refer to Javascript to share the onload event, while jQuery's $ (document ). the ready () method can well handle these situations. Every time you call $ (document ). the ready () method traces new behaviors on the existing behaviors. These behavior functions are executed in the order of registration. 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 "one" string dialog box is displayed, and the "two" string dialog box is displayed.