Analysis of $.Ready() under JQuery_jquery

$(document).Ready() method VS OnLoad event VS $(window).load() method
The first thing you usually learn when you come into contact with JQuery is when to start the event. For a long time, events triggered after the page was loaded were loaded in the Onload event of "Body".

Compared with the Onload event of Body and JQuery's Ready method, there are many disadvantages .For example:

1. Problems with loading multiple functions



You can only load like this in the Onload event, which is ugly... In JQuery, you can use multiple JQuery.Ready() methods, which will be executed in order

2. Code and content are not separated
Needless to say, this seems to be disgusting-.-!!

3. The order of execution is different
For the Body.Onload event, it will not be triggered until all the page content is loaded. What I mean is It is all content, including pictures, flash, etc. If the page has a lot of these contents, the user will wait for a long time.

As for the $(document).ready() method, this method only adds all the DOM of the page It will be triggered after loading is completed, which will undoubtedly greatly speed up the web page.

But for some special applications, such as zooming in and out of pictures, and cropping pictures. Does it need to be executed after all the content of the web page is loaded? I recommend using the $(window).load() method. This method will not be triggered until all the content of the page is loaded, and it does not have the disadvantages of the OnLoad event.

The above code will be executed in order after all the content of the page is loaded.

Of course, don’t forget the corresponding Unload method

The above code will be triggered when the page is closed.

Trigger JS code before all DOM is loaded
This method This is my favorite when debugging. Sometimes I also use this method when developing

Yes, it is to embed the js code into the body in the form of js closure. This code will be executed automatically. Of course, you can also embed js code directly. In this way, pay attention to the order issue, as follows:

The above two paragraphs Code, the second piece of code can only interpret the DOM before the current code, and test does not exist in the number of DOMs that have been parsed. Therefore, the second piece of code cannot be displayed correctly.