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?
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?
Share Improve this question edited May 23, 2017 at 11:56 CommunityBot 11 silver badge asked May 26, 2012 at 7:49 Félix SaparelliFélix Saparelli 8,7496 gold badges55 silver badges68 bronze badges 1-
In summary
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. – Gareth Commented May 26, 2012 at 8:41
2 Answers
Reset to default 5As 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 "plete" 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 plete. - 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 "plete" and theloadevent is fired.
the onload-event of a window fires when the DOM and all ressources(scripts,images,stylesheets, etc.) have finished loading:
window.onload=function()
{
//run code
}