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

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?

You should note that `ready()` is called as soon as the DOM is ready, which might be a while before the `onload` event fires. (As you might see in the jQuery source code, that doesn't always happen, since the `onload` is the fallback). — Shalom Craimer, Dec 20 '11 at 13:16

score 51 · Accepted Answer · answered Dec 20 '11 at 13:09

51

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.

answered Dec 20 '11 at 13:09

alex

438,662
188
837
957

6

Assuming you don't care about supporting older browsers... – nnnnnn Dec 20 '11 at 13:13
Thanks, alex, nice code! – Ito Dec 20 '11 at 13:24
Note that `DOMContentLoaded` fires before CSSOM is loaded. So anyone using `DOMContentLoaded` in the absence of jQuery would have to manually trigger page reflow/repaint first. – user31782 Mar 22 '17 at 08:48
`document.` at the start is not needed. `DOMContentLoaded` will also trigger on `window` (or `globalThis` in general), and `addEventListener(`…`)` implies `window.addEventListener(`…`)`. – Sebastian Simon Feb 11 '21 at 14:30

score 15 · Answer 2 · answered Dec 20 '11 at 13:12

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();
    }
}

Very cool and informative, makes me want to take a look at jQuery source — konkked, Feb 16 '15 at 12:42

score 0 · Answer 3 · answered Dec 20 '11 at 13:10

0

window.onload = function(){
 // do something
}

answered Dec 20 '11 at 13:10

dku.rajkumar

17,470
7
39
57

8

That isn't the same as DOM ready. – alex Dec 20 '11 at 13:20

score -4 · Answer 4 · answered Dec 20 '11 at 13:10

Use below script:

<script type="text/JavaScript">
function funtionToBeCalled(){
// code that will be exected after dom ready
}

window.onload=funtionToBeCalled;
</script>

Or there is one more way. Add onload event in body tag as below:

<body onload='functionToBeCalled();'>
</body>

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

4 Answers4

Linked