4

How to detect if stop loading button pressed in browser via javascript or if page is still loading?

7
  • 3
    I dont think you can. JS has reach till window and not outside it. You can rather check for your resources and process accordingly if they are not available
    – Rajesh
    Commented Jul 30, 2016 at 9:06
  • @Rajesh 0 How to do that ? If resourc which tests that itself is not loaded ?
    – Rayon
    Commented Jul 30, 2016 at 9:10
  • @Rayon Thats true but if user is consciously killing your process, I'm not sure if there is anything that can guarantee processing anything.
    – Rajesh
    Commented Jul 30, 2016 at 9:16
  • @Rajesh – Agree with you mate... Not sure why do OP need this...
    – Rayon
    Commented Jul 30, 2016 at 9:16
  • You can't detect if the "stop loading button" is pressed, you can detect content stopped loading though, assuming the code to do that reached the browser. Why do you need to know that and what are you going to do when detected that?
    – Asons
    Commented Jul 30, 2016 at 9:41

1 Answer 1

1

Assuming the script reaches the browser and not stop executing if the "stop loading button" is pressed, this might be a viable option

Using this can still have non loaded resources, though will give you a good start.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
  <script type='text/javascript'>
    
    var DomLoaded = {
      done: false,
      onload: [],
      loaded: function() {
        if (DomLoaded.done) return;
        DomLoaded.done = true;
        if (document.removeEventListener) {
          document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false);
        }
        for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
      },
      load: function(fireThis) {
        this.onload.push(fireThis);
        if (document.addEventListener) {
          document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
        } else {
          /*IE<=8*/
          if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
            (function() {
              try {
                document.body.doScroll('up');
                return DomLoaded.loaded();
              } catch (e) {}
              if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
              if (!DomLoaded.done) setTimeout(arguments.callee, 10);
            })();
          }
        }
        /* fallback */
        window.onload = DomLoaded.loaded;
      }
    };

    DomLoaded.load(function() {
      var d = document;
      if (d.getElementsById('loaded-checker')) {
        // loaded

      } else {
        // not loaded

      }
    });
  </script>
  <link rel='stylesheet' type='text/css' href='/css/style.css' />
  <script src="/js/script.js"></script>
</head>

<body>


  <div class="main-header"></div>
  <div class="main-content"></div>
  <div class="main-footer"></div>

  <div id="loaded-checker"></div>

</body>

</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.