ready method for jQuery

In the book, the author said the onload method of window just be triggered till the DOC tree is created and all resources （like image and other external resources） are fully loaded and the page is dispayed in the browser window. So since loading the recources takes some time, jQuery provide a better event read function which will be trigger just after the DOM tree is created not the loading the resources fully. Like following code:

$(document).ready(function() { $("table tr:nth-child(even)").addClass("even");});

After further research, I will find the ready function (this ready function is intance level, following we will introduce another ready function belongs to jQuery function which is function level) is following:

ready: function( fn ) {
  // Attach the listeners
  jQuery.bindReady();

  // Add the callback
  readyList.add( fn );

  return this;
 },

from the code we could find it just store the pass-in function in inner parameter readyList which type is jQuery.Callbacks (readyList = jQuery.Callbacks( "once memory" );). Before this it invokes the jQuery's bindReady method

bindReady: function() {
....

  // Mozilla, Opera and webkit nightlies currently support this event
  if ( document.addEventListener ) {
   // Use the handy event callback
   document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

   // A fallback to window.onload, that will always work
   window.addEventListener( "load", jQuery.ready, false );

  // If IE event model is used
  } else if ( document.attachEvent ) {
   // ensure firing before onload,
   // maybe late but safe also for iframes
   document.attachEvent( "onreadystatechange", DOMContentLoaded );

   // A fallback to window.onload, that will always work
   window.attachEvent( "onload", jQuery.ready );

   // If IE and not a frame
   // continually check to see if the document is ready
   var toplevel = false;

   try {
    toplevel = window.frameElement == null;
   } catch(e) {}

  ....   }
  }
 }

from the code we could figure out it attach the DOMContentLoaded method to the DOMContentLoaded or onreadystatechange event and attach jQuery.ready to load event.

Following we will introduce  DOMContentLoaded and jQuery.ready function:

if ( document.addEventListener ) {
 DOMContentLoaded = function() {
  document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
  jQuery.ready();
 };

} else if ( document.attachEvent ) {
 DOMContentLoaded = function() {
  // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
  if ( document.readyState === "complete" ) {
   document.detachEvent( "onreadystatechange", DOMContentLoaded );
   jQuery.ready();
  }
 };
}

from this code we could find the main purpose is the invoke jQuery.ready function and detach itself from relevant event.

It's turn to jQuery.ready:

// Handle when the DOM is ready
 ready: function( wait ) {
   ...

   // If there are functions bound, to execute
   readyList.fireWith( document, [ jQuery ] );

   // Trigger any bound ready events
   if ( jQuery.fn.trigger ) {
    jQuery( document ).trigger( "ready" ).off( "ready" );
   }
  }
 },

from the code we could fingure out it triggers the methods stored in the readyList and then detach itself from the relevant event in the last one.

 

In one word, for IE the ready function it uses onreadystatechange event, in the other side for other broswers it uses DOMContentLoaded event.