如何通过javascript手动显示标签加载指示器？ [英] 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浏览器：

Chrome:

Firefox（带有TreeTab插件）：

Firefox (with TreeTab plugin):

您明白了。我想让页面看起来已经加载完毕了。某些事件是使用javascript触发的，然后该标签看起来像正在加载。有办法做到吗？

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?

我能想到的一种方法是用微调框替换一个favicon，但是我不确定是否可以更改

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.

推荐答案

我认为这样做不是一个好主意，您会让用户执行很多无用的请求，这会杀死树木：/

IMO，最好自己做页面中所有的事情，然后让浏览器的UI自己做。

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 :

加载iframe会在chrome和Firefox中触发该图标 ^[1] ，因此您可以

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

• 在文档中添加iframe，


• 设置它的src到一些大文件

iframe的
• onload，用？缓存hack再次设置，


• 定期检查持续时间已经过去，因此您可以删除iframe的src。

• 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]似乎Firefox仅在启动时才触发图标

在代码中触发：

// 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;

}

这篇关于如何通过javascript手动显示标签加载指示器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！