jQuery unveiled: the bindReady() event method

The bindReady() event method is the current jQuery's implementation of the W3C DOM DOMContentLoaded event. It is as follows:

 bindReady: function() {
  if ( readyBound ) {

  readyBound = true;

  // Catch cases where $(document).ready() is called after the
  // browser event has already occurred.
  if ( document.readyState === "complete" ) {
   return jQuery.ready();

  // 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) {}

   if ( document.documentElement.doScroll && toplevel ) {
  1. sets the readyBound property to true
  2. checks if $(document).ready() is invoked after the DOM state readyState is already set to complete
  3. uses object detection to target standard W3C DOM compliant browser and Internet Explorer by using DOMContentLoaded for the first group and onreadystatechange for the latter
  4. if something goes wrong during the previous step, it uses the common DOM load event
  5. handles the case of HTML frames.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.