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

Question

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

Chrome:

Firefox（带有 TreeTab 插件）：

你懂的。我想让它看起来像是页面正在加载，当它已经加载时。一些事件触发是 javascript，然后选项卡看起来正在加载。有办法吗？

我能想到的一种方法是用微调器替换网站图标，但我不确定是否可以即时更改，即使可以，让它交叉也很麻烦-浏览器。

Answer 1

备选：

没有显示网页实际加载过程的函数。但是你可以像你说的那样手动完成！

当页面完全加载时，下面的事件开始运行，即使所有图像都已加载：

$(window).on('load', function() {
  // do stuff
});

所以您可以像这样设置 html：

<div class="preloader">
  // your loader here, animations, video, gif, anything you want
</div>
<div class="main" style="display: none;">
  // the page
</div>

和你的jquery像这样：

$(window).on('load', function() {
  setTimeout(function() {
    $('.preloader').css('display', 'none');
    $('.main').css('opacity', '1');
  }, 5000); // <-- 5seconds
});

还有你的手动加载功能！完美运行。

示例网站：ifly50

编辑：

添加了代码片段

代码片段：

$(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>

Answer 2

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 做他自己的事情。

但由于我喜欢挑战，这里有一个 hacky 方法：

加载 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;

}

Answer 3

我最近想到了同样的想法。一个巧妙的选择是使用动态图标而不是隐藏请求，在我看来这是一个非常糟糕的主意。我找到了这个例子。这里包含的代码太多，并且在 iframe 中不起作用，因此无法直接在 Whosebug 上显示它。相反，我描述了背后的想法。

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

这个想法很简单。用加载动画图标间隔替换图标。 favicon 不能是 GIF，因此您必须使用 JS 逐步加载每个图像。完成后，只需将其替换回原来的图标即可。

对我来说，这至少适用于所有基于 chrome 的浏览器。 Firefox 在此示例中抛出一些错误，但我想它可以修复。

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

How to manually show tab loading indicator via javascript?

html

javascript

browser

loading

spinner

备选：

编辑：