[JS] How to use native JS to implement jQuery's ready method, jsjqueryready

[JS] How to use native JS to implement jQuery's ready method, jsjqueryready

$ (Document). ready () in Jquery is similar to the window. onload method in traditional JavaScript, but it is different from the window. onload method.

In general, the window. onload () method is executed only after all the 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.

 

For details, we can compare the differences between them in the following aspects:

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 will be executed.

$ (Document). ready () can be compiled and executed simultaneously.

 

3. Simplified writing

Window. onload is not simplified.

$ (Document). ready (function () {}) can be abbreviated to $ (function (){});

In some development, javascript is generally used. I use the jquery mode, that is, most of the time, the first line is written as follows:

$ (Document). ready (function (){

...

});

At this time, you may not have to wait until all js and image loads are completed, but sometimes you have to wait until all elements are loaded, when some methods can be executed, for example, some images or other aspects have not been loaded. At this time, clicking some buttons will lead to unexpected situations. At this time, you need:

$ (Window ). load (function () {$ ("# btn-upload "). click (function () {// For example: uploadPhotos ();});});

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 is the most important function in the event module and can greatly speed up Web applications.

In addition, pay attention to the fact that in $ (document ). the event registered in the ready () method will be executed as long as the DOM is ready. Therefore, the associated file of the element may not be downloaded. For example, html related to images has been downloaded and parsed as DOM trees, but it is very likely that the images have not been loaded yet, therefore, the attributes such as the height and width of the sample slice are not necessarily valid at this time. To solve this problem, you can use the load () method, another method for page loading in Jquery. 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:

$ (Window). load (function () {// write code}); equivalent to the following code in JavaScript Window. onload = function () {// write code}

Therefore, for some special requirements, you do not want to use jQuery, but want to implement jQuery's ready method. TheHow to use native JS to implement jQuery's ready MethodWhat about it? The following is one of the practices:

Function ready (fn) {if (document. addEventListener) {// standard browser document. addEventListener ('domcontentloaded', function () {// logout time to avoid repeated document triggering. removeEventListener ('domainloaded', arguments. callee, false); fn (); // execution function}, false);} else if (document. attachEvent) {// IE browser document. attachEvent ('onreadystatechang', function () {if (document. readyState = 'complete') {document. detachEvent ('onreadystatechang', arguments. callee); fn (); // function execution }});}}

Author: Zhizhi

Sign: The road is long, and I will go up and down.