How to manually show tab loading indicator via javascript?

问题

I'm talking about an icon that is displayed on a tab during page loading.

Chrome:

Firefox (with TreeTab plugin):

You get the idea. I want to make it seem like the page is loading, when it's already loaded. Some event fires is javascript and then the tab looks like it's being loaded. Is there a way to do that?

One way I can think of is to replace a favicon with a spinner, but I'm not sure if it's possible to change on the fly and even if it is, it would be a hassle to make it cross-browser.

回答1:

I don't think it is a good idea to do it, you'll make your users do a lot of useless requests, and this kills trees : /

IMO, it's better to do all you have in the page itself, and let the browser's UI do his own stuff.

But since I liked the challenge, here is one hacky way :

Loading an iframe will trigger this icon in both chrome and Firefox^[1], so you could ,

append an iframe in the document,
set its src to some huge document,
onload of the iframe, set it again with a ? cache hack,
regularly check if the duration has elapsed so you can remove the iframe's src.

[1] It seems that Firefox does trigger the icon only if it was triggered when the document was still loading.

In code :

// how to use : 
showTabLoader(25000);

// takes duration in ms as only parameter
function showTabLoader(duration) {

  if (!duration) return;

  var now = performance.now();
  // To avoid flickering, you need some big document
  // Please change this url in your script, wikimedia may not be happy with us.
  var url = 'https://upload.wikimedia.org/wikipedia/commons/3/35/Viborg_Katedralskole_Symmetrical.jpg';

  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  iframe.onload = function() {
    if (performance.now() - now < +duration) {
      this.src = url + '?' + Math.random();
    }
  };
  var check = function(time) {
    if (time - now > +duration) {
      iframe.src = '';
      iframe.parentNode.removeChild(iframe);
      return;
    }
    requestAnimationFrame(check);
  }
  requestAnimationFrame(check);
  iframe.src = url;

}

回答2:

Alternitive:

There is no function that shows the actual loading process of the webpage. But you can do it manually, like you said!

The event below starts to run when the page is fully loaded, even after all the images are loaded:

$(window).on('load', function() {
  // do stuff
});

So what you could do is set up your html like this:

<div class="preloader">
  // your loader here, animations, video, gif, anything you want
</div>
<div class="main" style="display: none;">
  // the page
</div>

and your jquery like this:

$(window).on('load', function() {
  setTimeout(function() {
    $('.preloader').css('display', 'none');
    $('.main').css('opacity', '1');
  }, 5000); // <-- 5seconds
});

And there you have your manual loading function! Works perfect.

Example website: ifly50

EDIT:

added code snippet

Code snippet:

$(window).on('load', function() {
  setTimeout(function() {
    $('.preloader').css('display', 'none');
    $('.main').css('display', 'block');
  }, 3000); // <-- 3 seconds
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preloader">loading</div>
<div class="main" style="display: none;">main</div>

来源：https://stackoverflow.com/questions/39269407/how-to-manually-show-tab-loading-indicator-via-javascript

标签

javascript

html

browser

spinner