advanced code snippet search

We Recommend

Pro JavaScript Techniques 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

ishikawa on 04/28/08


Tagged

DOM xbs


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

inamorix
hariharank12
heinz1959
rodi01
kcmr
rafael
durvalagnelo


domready.js

Published in: JavaScript 

URL: http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/

This is a pretty simple example for cross browser dom:ready event handling inspired by mootools.

Plain TextExpand 
  1. /**
  2.  * domready.js
  3.  * 
  4.  * Cross browser mozilla's 'onDOMContentLoaded' implementation.
  5.  * Executes a function when the dom tree is loaded without waiting for images.
  6.  * 
  7.  * Based on +Element.Events.domready+ from Mootools open source project, 
  8.  * this tiny javascript library adds the emulated 'DOMContentLoaded' functionality.
  9.  * 
  10.  * Features:
  11.  *   - No dependency on external libraries
  12.  *   - Compatible with Prototype.js 
  13.  * 
  14.  * Tested browsers (Windows):
  15.  *   - IE 7 (XP standalone)
  16.  *   - IE 6 SP2
  17.  *   - Firefox 2.0.0.4
  18.  *   - Opera 9.21
  19.  * 
  20.  * Tested browsers (Mac OS X):
  21.  *   - Safari 2.0.4
  22.  *   - Firefox 2.0.0.4
  23.  *   - Mac Opera 9.21
  24.  *   - Mac IE 5.2.3
  25.  *
  26.  * Copyright (c) 2007 Takanori Ishikawa.
  27.  * License: MIT-style license.
  28.  * 
  29.  * MooTools Copyright:
  30.  * copyright (c) 2007 Valerio Proietti, <http://mad4milk.net>
  31.  *
  32.  *
  33.  * See Also:
  34.  *
  35.  *   mootools 
  36.  *   http://mootools.net/
  37.  *   
  38.  *   The window.onload Problem - Solved!
  39.  *   http://dean.edwards.name/weblog/2005/09/busted/
  40.  *   
  41.  *   [PATCH] Faster onload for Event.onload
  42.  *   http://dev.rubyonrails.org/ticket/5414
  43.  *   Changeset 6596: Support for "DOMContentLoaded" event handling (prototype.js event branch)
  44.  *   http://dev.rubyonrails.org/changeset/6596
  45.  *
  46.  */
  47.  
  48. if (typeof Event == 'undefined') Event = new Object();
  49.  
  50. /*
  51.  * Registers function +fn+ will be executed when the dom 
  52.  * tree is loaded without waiting for images. 
  53.  * 
  54.  * Example:
  55.  *
  56.  *  Event.domReady.add(function() {
  57.  *    ...
  58.  *  });
  59.  *
  60.  */
  61. Event.domReady = {
  62.   add: function(fn) {
  63.  
  64.     //-----------------------------------------------------------
  65.     // Already loaded?
  66.     //-----------------------------------------------------------
  67.     if (Event.domReady.loaded) return fn();
  68.  
  69.     //-----------------------------------------------------------
  70.     // Observers
  71.     //-----------------------------------------------------------
  72.     var observers = Event.domReady.observers;
  73.     if (!observers) observers = Event.domReady.observers = [];
  74.     // Array#push is not supported by Mac IE 5
  75.     observers[observers.length] = fn;
  76.  
  77.     //-----------------------------------------------------------
  78.     // domReady function
  79.     //-----------------------------------------------------------
  80.     if (Event.domReady.callback) return;
  81.     Event.domReady.callback = function() {
  82.       if (Event.domReady.loaded) return;
  83.  
  84.       Event.domReady.loaded = true;
  85.       if (Event.domReady.timer) {
  86.         clearInterval(Event.domReady.timer);
  87.         Event.domReady.timer = null;
  88.       }
  89.  
  90.       var observers = Event.domReady.observers;
  91.       for (var i = 0, length = observers.length; i < length; i++) {
  92.         var fn = observers[i];
  93.         observers[i] = null;
  94.         fn(); // make 'this' as window
  95.       }
  96.       Event.domReady.callback = Event.domReady.observers = null;
  97.     };
  98.  
  99.     //-----------------------------------------------------------
  100.     // Emulates 'onDOMContentLoaded'
  101.     //-----------------------------------------------------------
  102.     var ie = !!(window.attachEvent && !window.opera);
  103.     var webkit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
  104.  
  105.     if (document.readyState && webkit) {
  106.  
  107.       // Apple WebKit (Safari, OmniWeb, ...)
  108.       Event.domReady.timer = setInterval(function() {
  109.         var state = document.readyState;
  110.         if (state == 'loaded' || state == 'complete') {
  111.           Event.domReady.callback();
  112.         }
  113.       }, 50);
  114.  
  115.     } else if (document.readyState && ie) {
  116.  
  117.       // Windows IE 
  118.       var src = (window.location.protocol == 'https:') ? '://0' : 'javascript:void(0)';
  119.       document.write(
  120.         '<script type="text/javascript" defer="defer" src="' + src + '" ' + 
  121.         'onreadystatechange="if (this.readyState == \'complete\') Event.domReady.callback();"' + 
  122.         '><\/script>');
  123.  
  124.     } else {
  125.  
  126.       if (window.addEventListener) {
  127.         // for Mozilla browsers, Opera 9
  128.         document.addEventListener("DOMContentLoaded", Event.domReady.callback, false);
  129.         // Fail safe 
  130.         window.addEventListener("load", Event.domReady.callback, false);
  131.       } else if (window.attachEvent) {
  132.         window.attachEvent('onload', Event.domReady.callback);
  133.       } else {
  134.         // Legacy browsers (e.g. Mac IE 5)
  135.         var fn = window.onload;
  136.         window.onload = function() {
  137.           Event.domReady.callback();
  138.           if (fn) fn();
  139.         }
  140.       }
  141.  
  142.     }
  143.  
  144.   }
  145. }

Report this snippet 

You need to login to post a comment.