如何通过javascript手动显示标签加载指示器？

Question

我说的是页面加载过程中在选项卡上显示的图标。

铬：

Firefox（带有TreeTab插件）：

你明白了。我想让它看起来像页面正在加载，已经加载了。某些事件触发的是javascript，然后该标签看起来像正在加载。有没有办法做到这一点？

我可以想到的一种方法是用微调器替换favicon，但我不确定是否可以即时更改，即使可以更改，也要跨浏览器操作很麻烦。

Answer 1

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

IMO，最好做页面本身的所有工作，然后让浏览器的UI自己做。

但是由于我喜欢挑战，所以这是一种变通的方式：

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

• 在文档中附加一个iframe，
• 将其src设置为一些大文件，
• 在iframe加载后，通过?缓存破解再次进行设置，
• 定期检查持续时间是否已过，以便您可以删除iframe的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;

}