What's the JavaScript Only Substitute for jQuery's ready() Method?

The whole idea behind jQuery's ready() method is that it tries to execute the specified callback (cross-browser) as soon as the DOM is ready, so in our quest to find a purely JavaScript substitute, it's what we will be looking for primarily. Although, in various use cases your priorities might be different, so don't be afraid to use one method over the other if it fulfills your needs more effectively.

Placing Scripts at the Bottom of the Page

Since a web page is loaded sequentially top to bottom, if you place your JavaScript right before the closing body tag in your HTML code, then at the time the browser parses your script, DOM would be ready. This is the simplest and perhaps the most efficient replacement of the jQuery ready method.

Listening to the document.onreadystatechange Event

• The readystatechange has long been supported across all browsers so cross-browser compatibility is good.
• At any given time the document is in one of the following readyState:
  1. loading — the document is still loading;
  2. interactive — the document has been parsed and has finished loading, but sub-resources such as images, stylesheets and frames are still loading;
  3. complete — the document and all sub-resources have finished loading, and the load event is about to fire.

Usage Example:

document.addEventListener('readystatechange', function(event) {
    switch(event.target.readyState) {
        // document still loading?
        case 'loading':
            // do something
        break;
        
        // document finished loading, DOM elements are accessible
        case 'interactive':
            // do something
        break;
        
        // page is fully loaded?
        case 'complete':
            // do something
        break;
    }
});

Listening to the DOMContentLoaded Event

• Using the DOMContentLoaded event is the standards based approach to listening for when the DOM is ready.
• It is very well supported in modern browsers.
• It is fired when the document has been loaded but sub-resources (such as images, stylesheets and frames) might still be loading. This is equivalent to the document.readyState being interactive.

Usage Example:

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

Mimicking DOMContentLoaded Event Usingreadystatechange:

// alternative to DOMContentLoaded event
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // do something
   }
}

Listening to the load Event

• It is the most reasonably well-supported event across all browsers.
• The load event is fired after the entire document, including all sub-resources such as images, stylesheets and frames, have finished loading. This might not be ideal in most cases, as ideally we'd want to work on the DOM as soon as it's loaded / ready, regardless of whether the sub-resources have been fully loaded or not.

Usage Example:

window.addEventListener('load', function load(event) {
    // do something
});

Mimicking the load Event Using readystatechange:

// alternative to load event
document.onreadystatechange = function() {
    if (document.readyState === "complete") {
        // do something
   }
}

The load event should only be used to detect a fully-loaded page. It is a fairly common mistake to use load where DOMContentLoaded would be much more appropriate.

A Custom ready() Event Implementation

youmightnotneedjquery.com has a nice little implementation that's IE 9+ compatible:

function ready(callback) {
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
        callback();
    } else {
        document.addEventListener('DOMContentLoaded', callback);
    }
}

Here's how the function works:

1. The first condition checks for attachEvent on the document object (which was an Internet Explorer specific, non-standard implementation) to target Internet Explorer;
2. At the time function is executed, in the first case, if the document has fully loaded (including all resources) the callback executes, and in the second case the callback executes when the DOM is loaded (regardless of whether any resources are pending);
3. If either case returns false (i.e. DOM hasn't finished loading), then we add an event listener to monitor DOMContentLoaded which executes the callback whenever the DOM is ready.