Run code when the page is loaded

Question

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?

In summary `DOMReady` isn'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, May 26 '12 at 08:41

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

As Dr.Molle points out, document.readyState contains the property you're after:

document . readyState

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

The readystatechange event 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 readyState is set to "interactive" as soon as parsing is complete.
The DOMContentReady event is fired almost immediately (after it's determined which resources need to be loaded).
Those resources are loaded.
The document readyState is set to "complete" and the load event is fired.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 26 '12 at 08:09

Gareth

133,157
36
148
157

I've removed some incorrect information from my post. DOMContentLoaded is not the same as `readyState="complete"`, as described in the [post-parsing](http://www.whatwg.org/specs/web-apps/current-work/#the-end) section of the HTML5 spec – Gareth May 26 '12 at 08:29
Indeed. So, I made this: https://gist.github.com/2792934. To summarise: `DOMContentLoaded` 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 :) – Félix Saparelli May 26 '12 at 08:34
`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 name – Gareth May 26 '12 at 08:37

score 3 · Answer 2 · answered May 26 '12 at 07:55

3

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 
}

answered May 26 '12 at 07:55

Dr.Molle

116,463
16
195
201

Yes, it does. But that's not what I'm asking. If my code is run _after_ the `onload` event has fired, this fails. – Félix Saparelli May 26 '12 at 07:57
document.readyState is another option: https://developer.mozilla.org/en/DOM/document.readyState . It returns "complete" when the document has been loaded. – Dr.Molle May 26 '12 at 08:01
**No it's _not_.** I have specifically asked for _not_ DOMReady. Quoting the doc you linked to: "alternative to DOMContentLoaded". – Félix Saparelli May 26 '12 at 08:03
DOM and document are two different things – Dr.Molle May 26 '12 at 08:05

Run code when the page is loaded

2 Answers2