Javascript domready?

by

Edit: As the year 2018 comes upon us, I think it’s safe to listen for the DOMContentLoaded event.

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

Please note, the event will only fire once when your page loads! If you have to support really old browsers, then check out the super lightweight script I put together below.

For historical reference only:

jQuery has an undocumented property called isReady which is used internally to determine whether the DOM ready event has fired:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

I started at 1.5.2 went back as far as 1.3.2 and the property is there. While undocumented, I would say that you can rely on this property in future versions of jQuery.
Edit: And a year later – v1.7.2, they still use $.isReady – still undocumented, so please use at your own risk. Be careful when upgrading.

Edit: v1.9, they still use $.isReady – still undocumented

Edit: v2.0, with all of it’s “major” changes, still uses $.isReady – still undocumented

Edit: v3.x still uses $.isReady – still undocumented

Edit: As several people have pointed out, the above does not really answer the question. So I have just created a mini DOM ready snippet which was inspired by Dustin Diaz’s even smaller DOM ready snippet. Dustin created a neat way to check the document readyState with something similar to this:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

The reason this works is because the browser has 3 loading states: “loading”, “interactive”, and “complete” (older WebKit also used “loaded”, but you don’t have to worry about that any more). You will notice that both “loading” and “interactive” contain the text “in”… so if the string “in” is found inside of document.readyState, then we know we are not ready yet.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. The value of “this” within the handler using addEventListener
  5. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  6. How to get a word under cursor using JavaScript?
  7. DOM event precedence
  8. How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?
  9. HTML input file selection event not firing upon selecting the same file
  10. Pass mouse events through absolutely-positioned element
  11. jQuery equivalent of JavaScript’s addEventListener method
  12. In React, what’s the difference between onChange and onInput?
  13. Trigger onmouseover event programmatically in JavaScript
  14. onMouseMove get mouse position [duplicate]
  15. Do I need to remove event listeners before removing elements?
  16. How to fire a change event on a HTMLSelectElement if the new value is the same as the old?
  17. With form validation: why onsubmit=”return functionname()” instead of onsubmit=”functionname()”?
  18. cloning javascript event object
  19. JavaScript KeyCode Values are “undefined” in Internet Explorer 8
  20. Call a Javascript function every 5 seconds continuously [duplicate]
  21. How to listen for child window closing?
  22. JavaScript Event prototype in IE8
  23. How browser executes Javascript and renders asynchronously
  24. How do I listen for triple clicks in JavaScript?
  25. Fire oninput event with jQuery
  26. Handle refresh page event with JavaScript
  27. Is triggering event listeners using “.click()” asynchronous?
  28. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  29. What is the difference between Event.target, Event.toElement and Event.srcElement?
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment