Posted By

freelancephp on 03/01/10


Tagged

event onload domready DOMContentLoaded IEContentLoaded


Versions (?)

DOMReady Object


 / Published in: JavaScript
 

URL: http://www.freelancephp.net/domready-javascript-object-cross-browser/

Small object for cross-browser compatibility of the DOMContentLoaded event. Easily add functions that will be executed when the DOM is ready.

  1. /**
  2.  * DOMReady
  3.  *
  4.  * @fileOverview
  5.  * Cross browser object to attach functions that will be called
  6.  * immediatly when the DOM is ready.
  7.  * Released under MIT license.
  8.  * @version 2.0.1
  9.  * @author Victor Villaverde Laan
  10.  * @link http://www.freelancephp.net/domready-javascript-object-cross-browser/
  11.  * @link https://github.com/freelancephp/DOMReady
  12.  */
  13. (function (window) {
  14.  
  15. /**
  16.  * @namespace DOMReady
  17.  */
  18. window.DOMReady = (function () {
  19.  
  20. // Private vars
  21. var fns = [],
  22. isReady = false,
  23. errorHandler = null,
  24. run = function (fn, args) {
  25. try {
  26. // call function
  27. fn.apply(this, args || []);
  28. } catch(err) {
  29. // error occured while executing function
  30. if (errorHandler)
  31. errorHandler.call(this, err);
  32. }
  33. },
  34. ready = function () {
  35. isReady = true;
  36.  
  37. // call all registered functions
  38. for (var x = 0; x < fns.length; x++)
  39. run(fns[x].fn, fns[x].args || []);
  40.  
  41. // clear handlers
  42. fns = [];
  43. };
  44.  
  45. /**
  46. * Set error handler
  47. * @static
  48. * @param {Function} fn
  49. * @return {DOMReady} For chaining
  50. */
  51. this.setOnError = function (fn) {
  52. errorHandler = fn;
  53.  
  54. // return this for chaining
  55. return this;
  56. };
  57.  
  58. /**
  59. * Add code or function to execute when the DOM is ready
  60. * @static
  61. * @param {Function} fn
  62. * @param {Array} args Arguments will be passed on when calling function
  63. * @return {DOMReady} For chaining
  64. */
  65. this.add = function (fn, args) {
  66. // call imediately when DOM is already ready
  67. if (isReady) {
  68. run(fn, args);
  69. } else {
  70. // add to the list
  71. fns[fns.length] = {
  72. fn: fn,
  73. args: args
  74. };
  75. }
  76.  
  77. // return this for chaining
  78. return this;
  79. };
  80.  
  81. // for all browsers except IE
  82. if (window.addEventListener) {
  83. window.document.addEventListener('DOMContentLoaded', function () { ready(); }, false);
  84. } else {
  85. // for IE
  86. // code taken from http://ajaxian.com/archives/iecontentloaded-yet-another-domcontentloaded
  87. (function(){
  88. // check IE's proprietary DOM members
  89. if (!window.document.uniqueID && window.document.expando)
  90. return;
  91.  
  92. // you can create any tagName, even customTag like <document :ready />
  93. var tempNode = window.document.createElement('document:ready');
  94.  
  95. try {
  96. // see if it throws errors until after ondocumentready
  97. tempNode.doScroll('left');
  98.  
  99. // call ready
  100. ready();
  101. } catch (err) {
  102. setTimeout(arguments.callee, 0);
  103. }
  104. })();
  105. }
  106.  
  107. return this;
  108.  
  109. })();
  110.  
  111. })(window);

Report this snippet  

You need to login to post a comment.