Introduction to the concepts and usage of JQuery onload and ready_jquery

There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as images). The other is onload, which indicates that all elements of the page including images and other files have been loaded. (It can be said: ready is loaded before onload!!!)
General style control, such as image size control, is loaded in onload;

JS event triggering method can be loaded in ready;
Many people who use jQ start writing scripts like this:
Usual writing method

Copy code The code is as follows :

$(function(){
// do something
});

In fact, this is the abbreviation of jq ready(), he etc. Price at:

Copy code The code is as follows:

$(document).ready(function( ){
//do something
})

is also equivalent to the following method. The default parameter of jQuer is: "document";

Copy code The code is as follows:

$().ready(function(){
//do something
})

$(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 the "Body".
Compared with the Onload event of the Body and JQuery's Ready method, there are many disadvantages. For example:
Problems with loading multiple functions
■

This can only be loaded in the Onload event. Very ugly...
■In JQuery, you can use multiple JQuery.Ready() methods, which will be executed in order
Code and content are not separated
This seems to go without saying, it is deeply disgusting - .-!!◦ The order of execution is different
■ For the Body.Onload event, it will not be triggered until all the page content is loaded. I mean all content, including pictures, flash, etc. If the page has a lot of content, it will Let the user wait for a long time.
■ As for the $(document).ready() method, this method will only be triggered after all the DOM of the page is loaded, 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.

Copy code The code is as follows:

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

Copy code The code is as follows:

The above code will trigger when the page is closed .
Trigger JS code before all DOM loads
This method is my favorite when debugging. Sometimes I also use this method during development

Copy code The code is as follows:

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

Copy the code The code is as follows:

this is the content

this is the content

The above two pieces of code, the second piece of code can only be interpreted before the current code DOM, and test does not exist in the parsed DOM. Therefore, the second piece of code cannot be displayed correctly.