Posted By

ishikawa on 04/28/08


Tagged

DOM xbs


Versions (?)

Who likes this?

12 people have marked this snippet as a favorite

hariharank12
heinz1959
rodi01
kcmr
rafael
durvalagnelo
chianess
Jman
seanpowell
aegony
guo3823538
wirenaught


domready.js


 / Published in: JavaScript
 

URL: http://www.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.

  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  

Comments

RSS Icon Subscribe to comments
Posted By: ramonlechuga on March 9, 2011

ishikawa thanks for the script , why is necessary to document.write that tag?

You need to login to post a comment.