The $ (document). ready (function () {}) of JQuery and the window. onload of JS have their respective advantages.

Because of project requirements, JQuery has been used for quite some time. Since DOM node loading, image display, and dynamic resource requests are often processed ). ready (function () {}) is getting deeper and deeper, so I will share some of my experiences here:

1. $ (document). ready (function () {...}) This method is for the JQuery version of window. onload = function (){...}.

1.1 $ (document ). ready (function (){...}) the other two abbreviations: $ (). ready (function (){...}) [This method is not recommended in the official document] and $ (function (){...}).

1.2 $ (document ). ready (function (){...}) and window. load execution sequence: $ (document ). ready (...) is to load allDOM node document structureAnd then start execution. window. onload is loaded on the page.All resourcesBefore execution. That is, window. onload is executed only after all images and external link resources are loaded. onload can only define one (in fact, multiple can be defined, but only the last one is valid, which is equivalent to the previous one will be overwritten), and $ (function (){...}) multiple definitions can be defined and executed sequentially. For most applications, $ (function () {...}) can be said to win over window. onload. Therefore, the execution time is earlier and the user experience is better. However, in some specific circumstances, it is not necessarily the case. In section 2nd below, we will give an example.

2. $ (document). ready (function () {...}) is difficult to make or worse than window. onload:

2.1 because $ (document ). ready (function (){...}) it starts execution once the DOM node is loaded. But how to reference other JS scripts on the page and modify some DOM node structures? $ (document) at this time ). ready (function (){..}) the actual node may not be detected. For example:

   MyJS.js?v=1.0.0>" <script =>        

 

The corresponding code in MyJs. js adds the green DIV in the above Code with the class = "title2" attribute. This may be caused by MyJs. js is relatively large. Execute $ (function (){....}) myJs. js has not been loaded yet. If I run $ (function (){...} $ ("div. title2. Of course, you can execute $ ("div. title2 ") Add a timer before the code to solve this problem, but you do not know how long it will take to get the div. title2, so this method cannot be completely solved (you may have come up with another solution, that is, you can use setInternal to solve this problem. In fact, it does, I have also used this method to solve practical problems, especially for some images ). At this time, if you use window. onload, you will not have this headache!

2.2 In another case, some pages can embed some web services. In this case, use $ (function (){...}) you may not be able to obtain the corresponding DOM node after the web service request. The reason is similar to 2.1 and will not be repeated.

This is some of my experiences when I use JQuery to solve some practical problems. If there is something wrong, you are welcome to point it out and join us to make corrections!