javascript - trick to cross browser DOM ready event

 

the "ready" event (implemented as DOMContentLoaded in W3C DOM-capable browsers). The ready event fires as soon as the entire DOM document has been loaded and is able to be traversed and manipulated. This event has become an integral part of many modern frameworks, allowing code to be layered in an unobtrusive manner, frequently executing before the page is displayed.

 

 

following .js file shows you how to do implement the cross-browser DOM ready events.

 

 

 

/**************************************
*@Name: documentready.js
*  "ready" event (implemented in DOMConententLoaded in W3C DOM-capable brwosers). 
*@Summary
*  The ready event fires as soon as the entire DOM document has been loaded and is able to be traversed and manipulated; allowing code to be layered in an unobtrusive manner,
*  frequently executing before the page is displayed.
*
* @todo:
*   Test and add them to the docs
***************************************/

(function () {
  var isReady = false, DOMContentLoaded;
  // Catch cases where addReady is called after the
  // browser event has already occurred.
  if (document.readyState === "complete") {
    return ready();
  }
  // Mozilla, Opera and Webkit currently support this event
  if (document.addEventListener) {
    DOMContentLoaded = function () {
      document.removeEventListener(
"DOMContentLoaded", DOMContentLoaded, false);
      ready();
    };
    // Use the handy event callback
    document.addEventListener(
"DOMContentLoaded", DOMContentLoaded, false);
    // If IE event model is used
  } else if (document.attachEvent) {
    DOMContentLoaded = function () {
      if (document.readyState === "complete") {
        document.detachEvent(
"onreadystatechange", DOMContentLoaded);
        ready();
      }
    };
    // ensure firing before onload,
    // maybe late but safe also for iframes -- this is the fallback of the doScrollCheck because the doScrollCheck works only in IE not in iframe
    document.attachEvent(
"onreadystatechange", DOMContentLoaded);
    // 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) {
      doScrollCheck();
    }
  }
  function ready() {
    if (!isReady) {
      triggerEvent(document, "ready");
      isReady = true;
    }
  }
  // The DOM ready check for Internet Explorer
  // calling doScroll will have effect scrolling the viewPort to the left side 
  // but more importantly, it will throw an exception if the document is not ready 
  // however, it does not work in the iframe, so we have the fallback mentioned before
  function doScrollCheck() {
    if (isReady) {
      return;
    }
    try {
      // If IE is used, use the trick by Diego Perini
      // http://javascript.nwbox.com/IEContentLoaded/
      document.documentElement.doScroll("left");
    } catch (error) {
      setTimeout(doScrollCheck, 1);
      return;
    }
    // and execute any waiting functions
    ready();
  }
})();