CODEWITHSUNDEEP
javascripteventsload
gaurang171
gaurang171

Reputation: 9080

Determining whether the window has loaded without using any global variables

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.

Upvotes: 24

Views: 46031

Answers (4)

Jeremy Banks - Vive le Canada
Jeremy Banks - Vive le Canada

Reputation: 129755

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.

Upvotes: 54

Paul
Paul

Reputation: 12440

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.

Upvotes: -2

acondolu
acondolu

Reputation: 333

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>

Upvotes: -1

Grzegorz Kaczan
Grzegorz Kaczan

Reputation: 21676

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

Upvotes: 0

Related Questions