How to know when page is ready without using jQuery (alternative way)? [duplicate]

Question

Possible Duplicate:
$(document).ready equivalent without jQuery

If you have jQuery called in your page. You can simply do it:

$(document).ready(function() { /** code inside **/});

But how to do similar thing without jQuery?

Answer 1

You can use the DOMContentLoaded event.

document.addEventListener('DOMContentLoaded', function() {
   // ...
});

Note that in older IEs you need workarounds, some use the readystatechange event if I recall correctly.

Answer 2

I think the simplest way to answer your question is to answer "How does jQuery do it?" and for that, I'd recommend looking as the source code. The most relevant part of the code is at https://github.com/jquery/jquery/blob/master/src/core.js#L423

Here's a snippet:

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    return setTimeout( jQuery.ready, 1 );
}

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

    // A fallback to window.onload, that will always work
    window.addEventListener( "load", jQuery.ready, false );

// If IE event model is used
} else if ( document.attachEvent ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent( "onreadystatechange", DOMContentLoaded );

    // A fallback to window.onload, that will always work
    window.attachEvent( "onload", jQuery.ready );

    // If IE and not a frame
    // continually check to see if the document is ready
    var toplevel = false;

    try {
        toplevel = window.frameElement == null;
    } catch(e) {}

    if ( document.documentElement.doScroll && toplevel ) {
        doScrollCheck();
    }
}