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.

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.

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

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>

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.

Does this help ?

<script>
    var loaded = false;
    function checkLoaded(){
        alert(loaded);
        //alert true if window is loaded or alert false
    }
</script>


<body onload="loaded = true;checkLoaded();"> <!-- This should alert true -->
   Loding window.
   <script>
       checkLoaded();// this should alert false;
   </script>
</body>

来源：https://stackoverflow.com/questions/11528132/determining-whether-the-window-has-loaded-without-using-any-global-variables

标签

javascript

events

load