JQuery Ready Method Realization Principle Detailed _jquery

Today there is nothing to do research and research jquery.ready () internal realization, look at the source of JQ confused, because they are very vegetable, and turned over the cattle of the podcast, detailed, harvested a lot.

First to popularize the Jquery.ready () and Window.onload,window.onload events are triggered when all of the page's resources are loaded. If there is a large picture on the page and other resources slow response, can cause the Window.onload event delay can not trigger. So there was a Dom ready event. This event is triggered when the DOM document structure is ready, that is, before the resource is loaded.

The Ready method in jquery implements the effect of when the page is loaded, but he is not a window.onload or doucment.onload package, but rather a standard Web browser DOM hides APIs and IE browser flaws, first of all, Let's see the code for jquery.

domcontentloaded = function ()
 {
  //Cancel event listener, execute Ready method
 if (Document.addeventlistener)
 {   
  Document.removeeventlistener ("domcontentloaded", domcontentloaded, false);
  Jquery.ready ();
 }
  else if (document.readystate = = "complete") 
 {
  document.detachevent ("onReadyStateChange", domcontentloaded );
  Jquery.ready ();
 }
;

JQuery.ready.promise = function (obj) {if (!readylist) {readylist = jquery.deferred (); Indicates that the page has already been loaded, directly calling the Ready method if (document.readystate = = "complete") {//pressing Jquery.ready into the asynchronous message queue, setting the latency time of 1 milliseconds (note that some browsers delay not 
  Can be less than 4 milliseconds) settimeout (Jquery.ready); else if (Document.addeventlistener)//{//Monitor DOM loading complete document.addeventlistener ("domcontentloaded", Domcon
    Tentloaded, false); This is to ensure that all ready execution ends, and that if the Domcontentloaded method executes, there will be a state value IsReady set to True, so that once the//ready method executes, it is executed only once.
 
  The ready in Window.addeventlistener will be return interrupted Window.addeventlistener ("Load", Jquery.ready, false);
   else {//low version of IE browser document.attachevent ("onReadyStateChange", domcontentloaded);

   Window.attachevent ("onload", Jquery.ready);

   var top = false;
   try {top = Window.frameelement = null && document.documentelement; The catch (e) {} if (top && top.doscroll)//excludes the composition of the IFRAME {(function Doscrollcheck () {if!jquery.
IsReady) {
      try {//To be compatible with the low version of IE Http://javascript.nwbox.com/IEContentLoaded/top.doScroll ("left") based on Bugs; catch (E) {//due to a low version of IE browser, the onreadystatechange event is unreliable, so it is necessary to determine whether the page has been loaded to complete return settimeout (Doscrollcheck 
      , 50);
     } jquery.ready ();
   }
    })();
}} return Readylist.promise (obj);

 };

Ready:function (Wait)
 {

 if (wait = = true?--jquery.readywait:jquery.isready) { 
  //Determine if the page has finished loading and whether the re has been executed Ady method return
  ;


 if (!document.body) {return
  settimeout (jquery.ready);
 }

  
 Jquery.isready = true; Indicates that the ready method has been executed

  
 if (wait!== true &&--jquery.readywait > 0) {return
  ;
 }

  
 Readylist.resolvewith (document, [JQuery]);

  
 if (JQuery.fn.trigger) {
  jQuery (document). Trigger ("Ready"). Off ("Ready"); 
 }
,

Thank you for reading, I hope to help you, thank you for your support for this site!