How to detect if DOMContentLoaded was fired
JavascriptEventsReadystateJavascript Problem Overview
I'm trying to help developing a library and for it I'm trying to work with page loading.
In the process I want to make the library completely compatible with the use of defer and async.
What I want is simple:
How can I know that DOMContentLoaded was fired by the time the file is executed?
Why is this so difficult?
In IE, document.readyState show interactive before DOMContentLoaded.
I won't use browser detection in any way, it's against the policy of me and the rest of the participants.
What's the correct alternative?
Edit:
Seems like I wasn't clear enough. I'm not interested to know if the load event has already occurred!!! I already knew how to solve that problem! I want to know how to solve with DOMContentLoaded!!!
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
You can check the document's readyState
value and this way tell if the event was fired or not. Here's the code to run a function named start()
when the document has finished parsing:
if (/complete|interactive|loaded/.test(document.readyState)) {
// In case the document has finished parsing, document's readyState will
// be one of "complete", "interactive" or (non-standard) "loaded".
start();
} else {
// The document is not ready yet, so wait for the DOMContentLoaded event
document.addEventListener('DOMContentLoaded', start, false);
}
Notice that the code above detects when the document has finished parsing. Beware that's not the same as detecting if DOMContentLoaded
was fired (which happens immediately after interactive
), but it serves the same practical purpose, i.e., it tells you that the document has finished loading and has been parsed, but sub-resources such as images, stylesheets and frames are still loading (source).
Solution 3 - Javascript
How to correctly run something on DOMContentLoaded (or ASAP)
If you need to wait for the HTML document to be fully loaded and parsed to run something, you need to wait for DOMContentLoaded
, no doubt about it. But if you can't control when your script is going to execute, it's possible that DOMContentLoaded
was already fired by the time you get a chance to listen for the event.
To take that into consideration, your code needs to check if DOMContentLoaded
was already fired and, if so, proceed to executing right away whatever it is that needed to wait for DOMContentLoaded
:
function runWhenPageIsFullyParsed() {
// your logic goes here
}
if (document.readyState === "complete") {
// already fired, so run logic right away
runWhenPageIsFullyParsed();
} else {
// not fired yet, so let's listen for the event
window.addEventListener("DOMContentLoaded", runWhenPageIsFullyParsed);
}
The correct order of events during page loading is:
document.readyState
changes tointeractive
window
'sDOMContentLoaded
event gets fireddocument.readyState
changes tocomplete
window
'sload
event gets firedload
You can check the complete order of events during page loading in this fiddle.
Solution 4 - Javascript
Try this or look at this link
<script>
function addListener(obj, eventName, listener) { //function to add event
if (obj.addEventListener) {
obj.addEventListener(eventName, listener, false);
} else {
obj.attachEvent("on" + eventName, listener);
}
}
addListener(document, "DOMContentLoaded", finishedDCL); //add event DOMContentLoaded
function finishedDCL() {
alert("Now DOMContentLoaded is complete!");
}
</script>
Note
If you have a <script>
after a <link rel="stylesheet" ...>
the page will not finish parsing - and DOMContentLoaded
will not fire - until the stylesheet is loaded
Solution 5 - Javascript
If you want to know "exactly" if DOMContentLoaded was fired, you could use a boolean flag like this:
var loaded=false;
document.addEventListener('DOMContentLoaded',function(){
loaded=true;
...
}
then check with:
if(loaded) ...
Solution 6 - Javascript
Here is the thing, if some other library (such as jQuery) already used DOMContentLoaded, you can't use it again. That can be bad news, because you end up without being able to use it. You are gonna say, why not just use $(document).ready()
, because, NO!, not everything needs to use jQuery, specially if it is a different library.