Javascript page is fully loaded boolean check

Question

Short of setting a variable inside of window.onload, is there a way to detect if the page has finished loading?

I'm injecting a bit of third party JS in a page that may or may not be fully loaded. I can't modify the page. I can't use JQuery.

I can add a function and poll it repeatedly until it returns true (page fully loaded). Any ideas?

Take a look at jQuery's implementation. Or put your code in the end of DOM tree — SwiftMango, Jul 25 '14 at 04:07
What's the problem with setting a `load` event handler on the `window` object? If you are worried about overriding an existing event handler, use `addEventListener`. http://www.quirksmode.org/js/events_advanced.html — Felix Kling, Jul 25 '14 at 04:08

score 10 · Answer 1 · answered Jul 25 '14 at 04:09

I would make use of readyState.

For example first check if the document is loaded, and if not set up a listener:

if(document.readyState === 'ready' || document.readyState === 'complete') {
  doSomething();
} else {
  document.onreadystatechange = function () {
    if (document.readyState == "complete") {
      doSomething();
    }
  }
}

score 8 · Accepted Answer · answered Jul 25 '14 at 04:08

8

You can check the document.readyState property.

From MDN:

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

answered Jul 25 '14 at 04:08

Patrick Hofman

148,824
21
237
306

Javascript page is fully loaded boolean check

2 Answers2