For years we have relied on the window.onload event to trigger the execution of our JavaScript code; yet, by using such approach our code needs to wait until the last element of our page is loaded. To tell you the truth, relying on the window.onload event does the job most of the time; however, there are instances where we need to execute a piece of code while the page is still loading and that’s where a DOM ready function comes to play. So, in this post I will implement a DOM ready function.
From my previous posts you can tell that I always organize all the functions within a single namespace using JSON notation.
Basic namespace structure:
var DeveloperCaster = {
FunctionToExecuteOnReady: null,
Ready: function (_function) {
},
OnLoad: function (_function) {
}
};
I will need two function and a variable in this namespace.
Variable(s):
FunctionToExecuteOnReady : I will use this variable as a pointer to the function I will be executing.
Function(s):
Ready function: This is the actual DOMReady implementation
OnLoad function: I posted this function last month and it will used as a last resort if all my DOMReady attemps failed.
Ready Function
Ready: function (_function) {//DOM Ready
if (typeof DeveloperCaster.FunctionToExecuteOnReady != 'function') {
DeveloperCaster.FunctionToExecuteOnReady = _function;
} else {
var _current = DeveloperCaster.FunctionToExecuteOnReady;
DeveloperCaster.FunctionToExecuteOnReady = function () {
if (_current) {
_current();
}
_function ();
};
}
var _DOMReady = false;
var _wait = true;
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}, false);
} else {
//Internet Explorer
document.onreadystatechange = function () {
if (document.readyState == "complete") {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}
};
}
if (!_wait && !_DOMReady) {
DeveloperCaster.OnLoad(DeveloperCaster.FunctionToExecuteOnReady); //use window.onload as last resort
}
}
First thing I do is to check my pointer to see if there is already a function assigned to it (same idea from the multiple OnLoad functions). So, if it happens to be the first function I will assign that function to the pointer; however, if there is already a function assigned to be executed I will then copy that function into the _current variable and assign a new function to the FunctionToExecuteOnReady to execute my current function (_current) and the new function (_function).
Next I will check if the browser supports the document.addEventListener (Chrome, Firefox, IE9, and safari). If the event is not supported I will try to use the document.onreadystatechange (IE8 and lower). Before I started this processes I declared two variables _DOMReady and _wait which are flags I will use to call the window.onload event in cases where neither of my approaches worked.
Here is the fully implemented function:
var DeveloperCaster = {
DOMExecuted: false,
DOMExecuted: false,
FunctionToExecuteOnReady: null,
Ready: function (_function) {//DOM Ready
if (typeof DeveloperCaster.FunctionToExecuteOnReady != 'function') {
DeveloperCaster.FunctionToExecuteOnReady = _function;
} else {
var _current = DeveloperCaster.FunctionToExecuteOnReady;
DeveloperCaster.FunctionToExecuteOnReady = function () {
if (_current) {
_current();
}
_function ();
};
}
var _DOMReady = false;
var _wait = true;
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
DeveloperCaster.FunctionToExecuteOnReady();
DeveloperCaster.DOMExecuted = true;
}
_DOMReady = true;
_wait = false;
}, false);
} else {
//Internet Explorer
document.onreadystatechange = function () {
if (document.readyState == "complete") {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}
};
}
if (!_wait && !_DOMReady) {
DeveloperCaster.OnLoad(DeveloperCaster.FunctionToExecuteOnReady); //use window.onload as last resort
}
},
OnLoad: function (_function) {
var _current = window.onload;
if (typeof window.onload != 'function') {
window.onload = _function;
} else {
window.onload = function () {
if (_current) {
_current();
}
_function();
};
}
}
};
Usage:
DeveloperCaster.Ready(function () {
alert('DOM is ready');
});
No comments:
Post a Comment