This has not been answered here or there. These questions are poorly worded, and the answers are all along the lines of "use DOMReady".
I want to ensure that code is run only if the page has finished loading. I cannot alter the HTML file itself, but if I could, I would do something that amounts to this:
<!DOCTYPE html>
<html>
<head>
<script>window.loaded=false;</script>
</head>
<body onload="window.loaded=true;">
<!-- ... -->
</body>
</html>
Then in my code:
if (window.loaded) { run(); }
else { document.addEventListener("load", run); }
And that would achieve exactly what I want. Unfortunately, I cannot modify the HTML, which means that I am looking for a way to determine whether the document has loaded (not if the DOM is ready) from JS code only.
I have looked around quite a bit, but so far, all I have found revolves around DOMReady. Has no-one really ever looked for this?
2 Answers 2
As Dr.Molle points out, document.readyState contains the property you're after:
document . readyStateReturns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.
The
readystatechangeevent fires on the Document object when this value changes.
The order of event firing and readyState change is defined in the end of parsing section of the HTML5 spec. In summary:
- The document
readyStateis set to"interactive"as soon as parsing is complete. - The
DOMContentReadyevent is fired almost immediately (after it's determined which resources need to be loaded). - Those resources are loaded.
- The document
readyStateis set to "complete" and theloadevent is fired.
3 Comments
readyState="complete", as described in the post-parsing section of the HTML5 specDOMContentLoaded is runs when the DOM is loaded. onload runs after everything is loaded. readyState is set to "complete" just before that. Hence, you were both right, but I still have to wonder about all the different and ambiguous naming :)DOMReady wasn't ever an official term, but before the HTML5 spec got to the state it's currently in people needed a term to refer to. Now I guess a lot of the confusion comes from people mixing the correct term with the old namethe onload-event of a window fires when the DOM and all ressources(scripts,images,stylesheets, etc.) have finished loading:
window.onload=function()
{
//run code
}
4 Comments
onload event has fired, this fails.
DOMReadyisn't anywhere in the HTML5 spec, it's a term that means different things to the different people who implemented it before the HTML5 spec was fully developed.