Javascript – How to detect if document has loaded (IE 7/Firefox 3)

by

There’s no need for all the code mentioned by galambalazs. The cross-browser way to do it in pure JavaScript is simply to test document.readyState:

if (document.readyState === "complete") { init(); }

This is also how jQuery does it.

Depending on where the JavaScript is loaded, this can be done inside an interval:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

In fact, document.readyState can have three states:

Returns “loading” while the document is loading, “interactive” once it is finished parsing but still loading sub-resources, and “complete” once it has loaded.
— document.readyState at Mozilla Developer Network

So if you only need the DOM to be ready, check for document.readyState === "interactive". If you need the whole page to be ready, including images, check for document.readyState === "complete".

More Related Contents:

  1. How to trigger event in JavaScript?
  2. Javascript removeEventListener not working
  3. Attach a body onload event with JS
  4. Javascript multiple dynamic addEventListener created in for loop – passing parameters not working
  5. Why are inline event handler attributes a bad idea in modern semantic HTML?
  6. addEventListener calls the function without me even asking it to
  7. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  8. How to stop event propagation with inline onclick attribute?
  9. What’s the difference between event.stopPropagation and event.preventDefault?
  10. Detecting Browser Autofill
  11. How to run a function when the page is loaded?
  12. iFrame src change event detection?
  13. phantomjs not waiting for “full” page load
  14. Firing event on DOM attribute change
  15. Launch Bootstrap Modal on Page Load
  16. How to find out which JavaScript events fired?
  17. Easy to understand definition of “asynchronous event”? [closed]
  18. Javascript: Uncaught TypeError: Cannot call method ‘addEventListener’ of null
  19. Is there a way in javascript to detect if the unload event is caused via a refresh, the back button, or closing the browser? [duplicate]
  20. prevent Scroll bubbling from element to window
  21. Listening for Youtube Event in JavaScript or jQuery
  22. Throttle event calls in jQuery
  23. How can I get jQuery .val() AFTER keypress event?
  24. Is it possible to programmatically catch all events on the page in the browser?
  25. Why doesn’t document.addEventListener(‘load’, function) work in a greasemonkey script?
  26. jquery/javascript: function(e){…. what is e? why is it needed? what does it actually do/accomplish?
  27. reactjs event listener beforeunload added but not removed
  28. jquery keypress event object keyCode for firefox problem?
  29. One time event handling using promises?
  30. Listen to multiple keydowns

Leave a Comment