How does jQuery implement domReady and onload judgment?

How does jQuery implement domReady and onload judgment?

We are familiar with the $ (function () {}) form in jQuery usage. We bind the event function to the moment when the dom is loaded, relative to the window. in onload, some images, dynamic scripts, and some external resources can be avoided, which may cause a large delay impact on the current code execution because of window. onload is triggered only after all the resources to be loaded on the current page are loaded, including the dynamic loading before onload is triggered.

For standard browsers, The DOMContentLoaded event is used as an event triggered after dom loading, of course, to be accurate, it is triggered when dom and non-Dynamically Loaded JS are loaded. (For details about the triggering time, see the impact of JS, CSS, and img on the DOMContentLoaded event ).

Of course, earlier versions of IE (IE6 ~ IE8) does not support DOMContentLoaded events, so you also need to use some other methods to simulate DOMContentLoaded time triggering. Currently, the mainstream earlier version of the IE simulation method is to use doScroll for loop judgment. For JScript, if doScroll is called when the dom is not loaded, an error is reported, and try catch is used for Round Robin determination.

So we need to know how jQuery distinguishes domReady from load, that is, how jQuery implements domReady, because onload is an event that has been implemented by various browsers, DOMContentLoaded is not implemented by earlier IE versions. Then the jQuery version used this time is 1.11. After all, it also includes the following earlier versions of IE, SO 2 is not used. * version, but the essence is the same, only 2. * In versions, doScroll is discarded for loop determination and earlier version IE is abandoned. The best way to understand the essence is to look at the jQuery source code.

 
 

  
  
// A jQuery deferred of DOM ready
 
  
  
// It is also used as the tag for binding initialization.

  
  
Var readyList;

  
  


  
  
// Call the binding before binding initialization.

  
  
JQuery. fn. ready = function (fn ){

  
  
// Initialization binding is performed only when Initialization is not performed.

  
  
JQuery. ready. promise (). done (fn );

  
  
Return this;

  
  
};

  
  


  
  
JQuery. extend ({

  
  
// Whether the tag is triggered by DOM ready

  
  
IsReady: false,

  
  
ReadyWait: 1,

  
  


  
  
HoldReady: function (hold ){

  
  
If (hold ){

  
  
JQuery. readyWait ++;

  
  
} Else {

  
  
JQuery. ready (true );

  
  
}

  
  
},

  
  


  
  
// DOM ready event handle

  
  
Ready: function (wait ){

  
  


  
  
If (wait === true? -- JQuery. readyWait: jQuery. isReady ){

  
  
Return;

  
  
}

  
  


  
  
// The small BUG of IE ensures that the body already exists

  
  
If (! Document. body ){

  
  
Return setTimeout (jQuery. ready );

  
  
}

  
  


  
  
// Switch the label status

  
  
JQuery. isReady = true;

  
  


  
  
// Whether the tag needs to be waited

  
  
If (wait! = True & -- jQuery. readyWait> 0 ){

  
  
Return;

  
  
}

  
  


  
  
// Execute ready binding in the form of jquery

  
  
ReadyList. resolveWith (document, [jQuery]);

  
  


  
  
// Trigger other binding forms at the same time and log out in time

  
  
If (jQuery. fn. triggerHandler ){

  
  
JQuery (document). triggerHandler ("ready ");

  
  
JQuery (document). off ("ready ");

  
  
}

  
  
}

  
  
});
 
 

The extended isReady is used to control the number of ready executions. readyWait and holdReady are not included in this article. The ready method is the core and is triggered when jQuery determines domReady, combined with the resolveWith of defferred, event handles stored in the cache event handle array are executed one by one. The next step is domReady, which determines the domReady moment.

 
 

  
  
// Remove all binding events related to the event handle compeleted
 
  
  
Function detach (){

  
  
If (document. addEventListener ){

  
  
Document. removeEventListener ("DOMContentLoaded", completed, false );

  
  
Window. removeEventListener ("load", completed, false );

  
  
} Else {

  
  
Document. detachEvent ("onreadystatechange", completed );

  
  
Window. detachEvent ("onload", completed );

  
  
}

  
  
}

  
  


  
  
// For A domReady time point that has passed

  
  
Function completed (){

  
  
// The standard browser, the load event in IE, or the ready state is complete (IE)

  
  
If (document. addEventListener | event. type = "load" | document. readyState = "complete "){

  
  
Detach ();

  
  
JQuery. ready ();

  
  
}

  
  
}

  
  


  
  
JQuery. ready. promise = function (obj ){

  
  
If (! ReadyList ){

  
  
// Initialize readyList

  
  
ReadyList = jQuery. Deferred ();

  
  


  
  
// When $ (document). ready () is called after the ready event, it is directly triggered.

  
  
If (document. readyState = "complete "){

  
  
// Execute Similar simulated event triggers in asynchronous mode

  
  
SetTimeout (jQuery. ready );
  
  


  
  
// DOMContentLoaded event binding

  
  
} Else if (document. addEventListener ){
  
  
Document. addEventListener ("DOMContentLoaded", completed, false );

  
  
Window. addEventListener ("load", completed, false );

  
  


  
  
// This is the earlier version of IE.

  
  
} Else {
  
  
Document. attachEvent ("onreadystatechange", completed );

  
  
Window. attachEvent ("onload", completed );

  
  


  
  
// IE doScroll Detection

  
  
Var top = false;

  
  


  
  
Try {

  
  
Top = window. frameElement = null & document.doc umentElement;

  
  
} Catch (e ){}
  
  


  
  
If (top & top. doScroll ){

  
  
(Function doScrollCheck (){

  
  
If (! JQuery. isReady ){
  
  
Try {

  
  
Top. doScroll ("left ");

  
  
} Catch (e ){

  
  
// When an error occurs in try, the next latency loop is detected.

  
  
Return setTimeout (doScrollCheck, 50 );

  
  
}

  
  


  
  
Detach ();

  
  
JQuery. ready ();

  
  
}

  
  
})();

  
  
}

  
  
}

  
  
}

  
  
Return readyList. promise (obj );

  
  
};
 
 

In fact, for jQuery, it is a bit similar to killing one thousand by mistake and not letting go of one. In any status, you can listen to as many events as possible for judgment. In DOMContentLoaded, load, readystatechange and doScroll loop. jQuery is available. is isReady checked? What are you afraid. For more information about this process, you also need to know about jquery's promise. The functions and source code of jQuery callback and defferred. Why do you want to return readyList. promise (obj)? Let's take a look!