How To Manually Show Tab Loading Indicator Via Javascript?

January 30, 2024 Post a Comment

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 loadin

Solution 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, 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 parameterfunctionshowTabLoader(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;

}

Solution 2:

I recently thought of the same idea. A neat option is to use a dynamic favicon instead of hacking in hidden requests, which is a really bad idea in my opinion. I found this example. It's to much code to include here and doesn't work in iframes so no way of showing it directly on Stackoverflow. Instead i describe the idea behind.

https://www.cssscript.com/favicon-loading-indicator-favloader/

The idea is simple. Replace the favicon in an interval with the loading animation icons. A favicon cannot be GIF so you have to load each image step by step with JS. When you are done, simply replace it back with the original favicon.

For me this works at least in all chrome based browsers. Firefox throw some errors in this example, but i guess it can be fixed.

Solution 3:

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
});

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

Html5 Guide