We Recommend

Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

elightbo on 03/15/07

Tagged

DOM prototype unobtrusive

Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

vanne
frankyfish
vali29
hans

onDomReady

Published in: JavaScript

Dan at Vivabit created the DOM Ready extension for the Prototype framework which allows you to start executing code when the DOM is ready and all elements are available, leaving the images and other element loading in the background. Very nice work and something i’ve been waiting for a long time!

Plain TextExpand

// Adapted from DOM Ready extension by Dan Webb
// http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
// which was based on work by Matthias Miller, Dean Edwards and John Resig
//
// Usage:
//
// Event.onReady(callbackFunction);
Object.extend(Event, {
  _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
 
    if (Event._timer)  clearInterval(Event._timer);
 
    Event._readyCallbacks.each(function(f) { f() });
    Event._readyCallbacks = null;
 
  },
  onReady : function(f) {
    if (!this._readyCallbacks) {
      var domReady = this._domReady;
 
      if (domReady.done) return f();
 
      if (document.addEventListener)
        document.addEventListener("DOMContentLoaded", domReady, false);
 
        /*@cc_on @*/
        /*@if (@_win32)
            var dummy = location.protocol == "https:" ?  "https://javascript:void(0)" : "javascript:void(0)";
            document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
            document.getElementById("__ie_onload").onreadystatechange = function() {
                if (this.readyState == "complete") { domReady(); }
            };
        /*@end @*/
 
        if (/WebKit/i.test(navigator.userAgent)) { 
          this._timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) domReady(); 
          }, 10);
        }
 
        Event.observe(window, 'load', domReady);
        Event._readyCallbacks =  [];
    }
    Event._readyCallbacks.push(f);
  }
});