Pure JavaScript equivalent to jQuery's $.ready()

The simplest thing to do in the absence of a framework that does all the cross-browser compatibility for you is to just put a call to your code at the end of the body. This is faster to execute than an onload handler because this waits only for the DOM to be ready, not for all images to load. And, this works in every browser.

Your HTML here

// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here


To give you a little idea what jQuery does (which will work wherever the script tag is placed), if supported, it tries the standard:

document.addEventListener('DOMContentLoaded', fn, false);  

with a fallback to:

window.addEventListener('load', fn, false );  

or for older versions of IE, it uses:

document.attachEvent("onreadystatechange", fn);  

with a fallback to:

window.attachEvent("onload", fn);