JavaScript – $(document).ready() without jQuery
Everyone who has been using jQuery knows the purpose and how to use the jQuery(document).ready() function. But what if you want or need to implement such a construct without jQuery (for whatever reason, one would be to avoid the jQuery overhead if all you really need is the ready() handler?
One would think it's as simple as using a onload event, just like:
<body onload="myReadyHandler();">
But it is not. There is an important and significant difference between onload and document.ready():
- The onload event runs when everything is complete, i.e. the entire page including all external resources like images has been loaded.
- The jQuery document.ready() handler runs when the DOM is complete. At this point, the browser may still be busy downloading images or other external assets. Essentially this means that $(document).ready will usually run earlier than any onload event handler, but the document will be ready for DOM manipulations when it runs.
To implement this in plain JavaScript, one must use the DOM-ready event. All modern browsers provide such an event, but there are (as usual *sigh*) slight differences between IE and the other "big three" implementations (Mozilla, Opera and Webkit-based browsers like Google Chrome). Using such events is how jQuery internally implements its document.ready handler in a transparent way so that no developer needs to care about browser specific things.
Here is the sample code to do it
/*
* old school version of $(document).ready
*/
function do_your_stuff()
{
// this is where your code that should execute goes
[...]
}
if(document.addEventListener) { // Mozilla, Opera, Webkit are all happy with this
document.addEventListener("DOMContentLoaded", function()
{
document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
do_your_stuff();
}, false);
}
else if(document.attachEvent) { // IE is different...
document.attachEvent("onreadystatechange", function()
{
if(document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
do_your_stuff();
}
});
}
The above code can be used to simulate a $(document).ready() handler without jQuery using just plain JavaScript. It might be useful when you can not or don't want to use jQuery or any other framework for that matter.
