javascript - 如何通过 javascript 手动显示选项卡加载指示器？

Question

我说的是页面加载期间显示在选项卡上的图标。

Chrome:

Firefox(带有 TreeTab 插件):

你明白了。我想让页面看起来像是正在加载，但实际上已经加载了。某些事件是由 JavaScript 触发的，然后选项卡看起来像是正在加载。有办法做到这一点吗？

我能想到的一种方法是用微调器替换图标，但我不确定是否可以动态更改，即使可以，使其跨浏览器也会很麻烦。

Answer 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，最好在页面本身中完成所有操作，并让浏览器的 UI 完成自己的工作。

但是因为我喜欢这个挑战，所以这里有一种巧妙的方法:

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

• 在文档中附加 iframe，
• 将其 src 设置为某个大文档，
• 加载 iframe，使用 ? 缓存 hack 再次设置它，
• 定期检查持续时间是否已过，以便您可以删除 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;

}