How to detect if DOMContentLoaded was fired

by

For seeing if all resources in the page have been loaded:

if (document.readyState === "complete" || document.readyState === "loaded") {
     // document is already ready to go
}

This has been supported in IE and webkit for a long time. It was added to Firefox in 3.6. Here’s the spec. "loaded" is for older Safari browsers.

If you want to know when the page has been loaded and parsed, but all subresources have not yet been loaded (which is more akin to DOMContentLoaded), you can add the “interactive” value:

if (document.readyState === "complete" 
     || document.readyState === "loaded" 
     || document.readyState === "interactive") {
     // document has at least been parsed
}

Beyond this, if you really just want to know when DOMContentLoaded has fired, then you’ll have to install an event handler for that (before it fires) and set a flag when it fires.

This MDN documentation is also a really good read about understanding more about the DOM states.

More Related Contents:

  1. How to trigger event in JavaScript?
  2. Definitive way to trigger keypress events with jQuery
  3. event.preventDefault() function not working in IE
  4. JavaScript: remove event listener
  5. What is the difference between the mouseover and mouseenter events?
  6. Difference between “change” and “input” event for an `input` element
  7. Resize event for textarea?
  8. HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]
  9. Attach a body onload event with JS
  10. What do the different readystates in XMLHttpRequest mean, and how can I use them?
  11. Detecting when Iframe content has loaded (Cross browser)
  12. Changing the keypress
  13. Can the unload Event be Used to Reliably fire ajax Request?
  14. Socket.io Client: respond to all events with one handler?
  15. jQuery prevent change for select
  16. adding event listener cross browser [closed]
  17. Detect double tap on ipad or iphone screen using javascript
  18. Monitor all JavaScript events in the browser console
  19. How to clone or re-dispatch DOM events?
  20. How can I stop an onclick event from firing for parent element when child is clicked?
  21. Capture event onclose browser
  22. List all javascript events wired up on a page using jquery
  23. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  24. Listen for changes with localStorage on the same window
  25. Set variable in parent window from iframe
  26. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  27. addEventListener to iFrame
  28. How can I remove a JavaScript event listener?
  29. Add multiple window.onload events
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment