javascriptdomdomready

How to check if DOM is ready without a framework?


The question is so like a zillion others here and on the web - How to check if DOM has loaded in Javascript? But here's the catch:

Can this be done more or less reliably and with cross-browser compatibility?

Added: Let me clarify: I'm writing a standalone .JS file which can be included in arbitrary webpages. I want to execute code AFTER the DOM has been loaded. But I don't know HOW my script will be included. It could be by placing a <script> tag (in which case the traditional onload or DOM-readiness solutions will work); or it could be loaded via AJAX or some other means, much later after the DOM is already loaded (so the previously mentioned solutions will never fire).


Solution

  • The document.readyState property can be used to check if the document is ready. From MDN:

    Values

    The readyState of a document can be one of following:

    • loading – The document is still loading.
    • interactive – The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
    • complete – The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

    Code example:

    if(document.readyState === "complete") {
        // Fully loaded!
    }
    else if(document.readyState === "interactive") {
        // DOM ready! Images, frames, and other subresources are still downloading.
    }
    else {
        // Loading still in progress.
        // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.
    
        window.addEventListener("DOMContentLoaded", () => {
            // DOM ready! Images, frames, and other subresources are still downloading.
        });
    
        window.addEventListener("load", () => {
            // Fully loaded!
        });
    }