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.

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.

• javascript
• html
• browser
• spinner
• loading

• I think you need something like jQuery(document).ready(function() { setTimeout(function() { .... }, 2000); }); - I appreciate jQuery wasn't specified! skeptical about whether this will work or not.. – IronAces Commented Sep 1, 2016 at 10:50
• @DanielShillcock Sorry, I don't quite follow. What do I put inside a timeout to make it seem like the page is still loading? – Victor Marchuk Commented Sep 1, 2016 at 10:52
• Sorry. Thinking aloud. Perhaps something like the following could work? document.onreadystatechange = function() { if (this.readyState === "complete"){ //Set readyState back to false until you wish for the spinner to disappear } }; – IronAces Commented Sep 1, 2016 at 10:55
• @DanielShillcock readyState is read-only, you can’t set it yourself. – C3roe Commented Sep 1, 2016 at 11:24
• I have no idea why/how such a “feature” would be useful … but the best way to achieve it would probably be to actually load something, like an image, and have the server respond with data very slowly. (Whether loading of embedded resources still make the spinner show up might be browser dependent though.) – C3roe Commented Sep 1, 2016 at 11:26

4 Answers 4

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;

}

This is actually possible using native functionality via Navigation API (currently only available for Chrome, Edge and Opera):

function showLoading(promise) {
  navigation.addEventListener('navigate', evt => {
    evt.intercept({
      scroll: 'manual',
      handler: () => promise,
    });
  }, { once: true });
  return navigation.navigate(location.href).finished;
}

// show browser loading UI for 1.5s
showLoading(new Promise(r => setTimeout(r, 1500)));

Credit @jason-miller: https://mastodon.social/@developit/109865246509715580

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.

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>