How to check if DOM is ready without a framework?

by

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

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. Converting HTML string into DOM elements?
  3. Get next / previous element using JavaScript?
  4. What is innerHTML on input elements?
  5. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  6. Adding an onclick event to a table row
  7. In Javascript, can you extend the DOM?
  8. Does javascript process using an elastic racetrack algorithm
  9. Does the onchange event propagate?
  10. Change ‘s option and trigger events with JavaScript
  11. Dynamic creation of table with DOM
  12. Adding an img element to a div with javascript
  13. How to dynamic filter options of with jQuery?
  14. How to stop event bubbling with jquery live?
  15. for each element type in body
  16. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  17. Uncaught TypeError: Cannot read property ‘top’ of undefined
  18. React Error: Target Container is not a DOM Element
  19. How to remove DOM elements without memory leaks?
  20. How can I get access to a Highcharts chart through a DOM-Container?
  21. But why’s the browser DOM still so slow after 10 years of effort?
  22. How to JSON.stringify a dom element?
  23. INVALID_STATE_ERR: DOM Exception 11 (WebKit)
  24. Is there a cross-browser standard on-load event for HTML’s “object” tag?
  25. Can a website block a Chrome Extension? [duplicate]
  26. Is window.document ever null or undefined?
  27. How to reduce the length of a video using JavaScript? [closed]
  28. How to get computed style of a HTMLElement
  29. Why I cant use jQuery functionality
  30. create a HTMLCollection

Leave a Comment