document.readyState on DOMContentLoaded?

Question

In browsers that support the event DOMContentLoaded and the property document.readyState:

When DOMContentLoaded fires, can I assume that the value of document.readyState will always be either "complete" or "interactive"/"loaded"?

(Or could it be that document.readyState sometimes still has the value "loading"?)

In your answer please provide a reference to an authoritative source.

You may wonder: Why not just listen to readystatechange? It is because the Android 2.3.5 standard browser is a target platform, and it does not implement the readystatechange event.

Solution 1

The value of the readyState property is always "interactive" when DOMContentLoaded has fired. This is evidenced by the fact that the MDN documentation claims:

// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

is interchangeable with a DOMContentLoaded handler. You can also have a look at the spec here, which reiterates this.

Solution 2

As per accepted answer:

The value of the readyState property is always "interactive" when DOMContentLoaded has fired.

Wrong

It has either of:

• interactive
• complete

document . readyState ref.

Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading subresources, and "complete" once it has loaded.

If one attach an event listener to readystatechange before Document has state interactive one can check for interactive alone, like with example from MDN. Then one will catch the state if it ever reaches it.

However if one check the state at a later stage it is not.

Also by example from MDN, these are equal:

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}


document.addEventListener("DOMContentLoaded", function () {
    initApplication();
});

That does not mean:

if (document.readyState !== 'loading')
    assert(document.readyState === 'interactive')

Which the answer suggests.

As to say:

• document.addEventListener("DOMContentLoaded", ...

will never equal to:

• window.addEventListener('load', ...

Comments

[feklee]

Unfortunately, that's not right on Android 2.3.5. I just did a test, and the result is completely unexpected to me: When DOMContentLoaded fires, then the value of document.readyState is "loaded" (i.e. neither "complete", nor "interactive", nor "loading").

[Asad Saeeduddin]

@feklee That must be because there are no sub resources, in which case DOMContentLoaded and the load event fire simultaneously. Have a closer look at the spec I linked.

[Asad Saeeduddin]

@feklee Once the load event fires it should be "complete", as in other browsers, not "loading". The sequence of values is "loading" -> "interactive" -> "complete". Guess Android isn't following the spec on this one, but to have "loading" after everything is loaded is just ridiculous. Are you sure there isn't a mistake in your test case?

[feklee]

Sorry, that was a typo. Correct is: Note that the value is "loaded", not "complete". Furthermore, once the "load" event fires, the value is "complete" as in other browsers.

[Asad Saeeduddin]

@feklee I was curious; this answer was not completely accurate as far as your problem was concerned. Why did you accept it? More importantly, how did you resolve the issue? Thanks

[feklee]

Well, you pointed me to MDN saying that the above code is an "alternative to DOMContentLoaded", and MDN is an authoritative source IMHO. As for the issue with Android 2.3: In my code, I simply treat "interactive" and "loaded" as identical. I've seen other code on the net doing the same (I forgot where it was, but it was in some popular project that again could be considered authoritative).

[4esn0k]

"interactive" can be setted to early in IE8/IE9

[MTCoster]

I appreciate that this is a very old answer, but there's a subtle difference that really caught me out. readyState is set to interactive before scripts with the defer attribute are evaluated, while DOMContentLoaded is fired after.

[Fedcomp]

@MTCoster i am automating browser with scripts, and this comment was really helpful to figure out difference between readyState interactive and webnavigation.onDomContentLoaded. Thank you!

[user3678429]

@MTCoster That is consistent with this documentation, i.e. that deferred scripts are guaranteed to have executed once the DOMContentLoaded event is dispatched. But I'm confused about how to square that with the claim here that you can infer that DOMContentLoaded has fired if document.readyState is not loading (what about interactive?)