Determining whether the window has loaded without using any global variables

Question

I need to find out if the window has loaded or not.

I want to create a checkLoaded function that will return true or false to indicate this, based on when I call it.

<html>
<head>
  function checkLoaded(){
    //alert true if window is loaded or alert false
  }
</head>
<body onload="checkLoaded()"> <!-- This should alert true -->
   Loding window.
   <script>
       checkLoaded();// this should alert false;
   </script>
</body>
</html>

I don't want to use a global variable that I set when the window loads.

Is there any way that I can check the window object's status, perhaps a property?

I don't want to use jQuery or any other external libraries.

if you're in the `onload` handler, the window is finished loading. what is your question? — jbabey, Jul 17 '12 at 17:59
i have one function and same function should be alert true or false. based on where i am calling it. — gaurang171, Jul 17 '12 at 18:00
as Grzegorz Kaczan mentions below, you only have two events to work with. So you can use whichever of those events that best suit you to set your true/false values to check against. It may also help to provide some context as to what you are trying to accomplish and why. "Window load" can mean many things to many people. and those two basic events provide the function(){do what you like here} to accomplish most needs. — Betard Fooser, Jul 17 '12 at 18:49
I am trying to make some redirection call based where the function called. if the function is called after the completed page load i need to redirect it and if its in between i need to wait till its loaded. I dont have control of writing multiple functions. and for tracking purpose complete page laod is required, — gaurang171, Jul 17 '12 at 18:59

score 51 · Accepted Answer · answered Jul 18 '12 at 14:00

51

You can use the document.readyState property to check if the document has loaded without listening for any events. It will be set to "complete" check if the document and all subresources are loaded. (This corresponds to the load event.)

function checkLoaded() {
  return document.readyState === "complete";
}

If you only want to check if the document has loaded, without worrying about subresources, you can also check if the property is "interactive".

function checkLoaded() {
  return document.readyState === "complete" || document.readyState === "interactive";
}

This should work in current browsers, but is not supported in older versions of all browsers.

answered Jul 18 '12 at 14:00

Jeremy

1
85
340
366

1

Which are the "current" browsers and which are the "older" browsers? – Steve Nov 19 '14 at 14:54
9

This code checks document ready, not window load. There is a difference http://stackoverflow.com/a/8835458/319266 – Timo Tijhof Sep 16 '15 at 00:53
1

@Steve: According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState), at least the `complete` value is supported by IE 8+. – sylbru Jan 12 '18 at 14:14
I don' think this is the correct answer, as mentioned by @TimoTijhof – Nico Savini Apr 28 '20 at 19:22

score 0 · Answer 2 · answered Jul 17 '12 at 18:01

0

You have 2 events available:

addListener(document, "DOMContentLoaded", function(){});  //Dom parsing is finished
addListener(window, "load", function(){}); //loading of all external stuff is done

You can see a difference in those here

answered Jul 17 '12 at 18:01

Grzegorz Kaczan

21,186
3
19
17

my question is i have a function checkLoaded and in that i want to know if window is loaded or not. with in that function look in the code where i have called same function twice in at two different places. – gaurang171 Jul 17 '12 at 18:05

score -1 · Answer 3 · answered Jul 17 '12 at 18:55

Maybe simply something like this:

<html>
<script>
  var loaded = false;
  function checkLoaded(){
     alert(window.loaded);
  }
</script>
<body onload="window.loaded = true; checkLoaded()">
   Loading window.
   <script>
       checkLoaded();
   </script>
</body>
</html>

Paul · Answer 4 · 2012-07-17T20:26:41.497

-2

This will alert when the window is loaded:

(function(w) {
    //private variable
    var loaded = false;
    w.onload = function() {
        loaded = true;
    };

    w.checkLoaded = function() {
        alert(loaded);
    };
})(window);

You can now call checkLoaded() from any part of your app and it will return true or false.

edited Jul 17 '12 at 20:26

answered Jul 17 '12 at 17:57

Paul

12,392
4
48
58

1

please understand the requirement properly. i have one function and same function should be alert true or false. based on where i am calling it. – gaurang171 Jul 17 '12 at 17:59

Determining whether the window has loaded without using any global variables

4 Answers4

Linked

Related