Skip to content
Browse files

created a cross browser 'DOM ready' function

  • Loading branch information...
0 parents commit 955b2ee2cbe8018f85d0a521b20aab6c1ea6419d @Integralist committed Mar 8, 2011
BIN Assets/Images/large_image_1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN Assets/Images/large_image_2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN Assets/Images/large_image_3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 Assets/Scripts/DOMready.js
@@ -0,0 +1,63 @@
+var DOMready = (function(){
+
+ // Variables used throughout this script
+ var queue = [],
+ exec,
+ loaded,
+ original_onload;
+
+ // Private inner function which is called once DOM is loaded.
+
+ function init() {
+ // Let the script know the DOM is loaded
+ loaded = true;
+
+ // Cleanup
+ if (document.addEventListener) {
+ document.removeEventListener("DOMContentLoaded", init, false);
+ }
+
+ // Move the zero index item from the queue and set 'exec' equal to it
+ while ((exec = queue.shift())) {
+ // Now execute the current function
+ exec();
+ }
+ }
+
+ return function(fn) {
+ // if DOM is already loaded then just execute the specified function
+ if (loaded) {
+ return fn();
+ }
+
+ if (document.addEventListener) {
+ // This event only ever fires once
+ document.addEventListener("DOMContentLoaded", init, false);
+ } else {
+ // All browsers support document.readyState (except Firefox 3.5 and lower, but they support DOMContentLoaded event)
+ /loaded|complete/.test(document.readyState) ? init() : setTimeout("DOMready(" + fn + ")", 10)
+ }
+
+ // Fall back to standard window.onload event
+ // But make sure to store the original window.onload in case it was already set by another script
+ original_onload = window.onload;
+
+ window.onload = function() {
+
+ // Note: calling init() now wont cause any problem for modern browsers.
+ // Because the function would have already been called when the DOM was loaded.
+ // Meaning the queue of functions have already been executed
+ init();
+
+ // Check for original window.onload and execute it
+ if (original_onload) {
+ original_onload();
+ }
+
+ };
+
+ // As the DOM hasn't loaded yet we'll store this function and execute it later
+ queue.push(fn);
+ };
+
+}());
41 index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+<head>
+ <title>DOMready</title>
+ <meta charset="utf-8">
+</head>
+<body>
+
+ <img src="Assets/Images/large_image_1.jpg" width="100" height="100">
+ <img src="Assets/Images/large_image_2.jpg" width="100" height="100">
+ <img src="Assets/Images/large_image_3.jpg" width="100" height="100">
+
+ <script src="Assets/Scripts/DOMready.js"></script>
+ <script>
+ DOMready(function(){
+ console.log('1: ' + new Date());
+ });
+
+ DOMready(function(){
+ console.log('2: ' + new Date());
+ });
+
+ DOMready(function(){
+ console.log('3: ' + new Date());
+ });
+
+ DOMready(function(){
+ console.log('4: ' + new Date());
+ });
+
+ DOMready(function(){
+ console.log('5: ' + new Date());
+ });
+
+ window.onload = function() {
+ console.log('Window Load Event: ' + new Date());
+ }
+ </script>
+
+</body>
+</html>

0 comments on commit 955b2ee

Please sign in to comment.
Something went wrong with that request. Please try again.