CODEWITHSUNDEEP
javascriptjqueryhtml
Black
Black

Reputation: 20322

Check if loading icon is currently showing in tab

I have a download button on my page to let users download a file. If the user is pressing the button then the page starts loading which you can see in the tab:

load

How can I get the state?

I tried to get the state like this:

console.log(document.readyState);

But I always get complete. I also tried to wait first 1 second, because i thought that it shows the status before the user clicked the button:

setTimeout(function(){
  console.log(document.readyState);
  },1000
);

However, I still get complete even though there is always a loading icon in the tab which stays for about 15 seconds.

How can I check the state?

Upvotes: 1

Views: 767

Answers (1)

Robbie
Robbie

Reputation: 17710

The rules of when the spinner stops will vary by browser, but the basic description appears to be "while the page is loading". But this can include images, javascript and even ajax calls / images and iFrames etc that are requested as part of the load.

As document.readyState relates to the base HTML only, this is commonly a trigger for starting all the other loads, e.g. the jQuery $().ready( function() {}) construct, and they can keep the spinner rolling.

You may have more luck firing an event off $(window).load(...) which is more closely defined as "when the content is loaded" which aligns more closely to the description for the spinner. This won't be a perfect match as subsequent AJAX calls or iFrame reloads may get the spinner going again, even after the "load" event has fired, but this is commonly used as the trigger for events that require the images and JS to have been loaded.

Alternatively, if you know the content of the page, you can fire events off all the images/JS/AJAX that load and count the number loaded (or failed to load) matches the number you are expecting. But that's a bit more work to build the hooks in.

Upvotes: 1

Related Questions