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

Question

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

铬：

Firefox（带有 TreeTab 插件）：

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

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

Answer 1

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

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;

}

Answer 2

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

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

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

对我来说，这至少在所有基于 Chrome 的浏览器中都有效。 Firefox 在这个例子中抛出了一些错误，但我想它可以被修复。

Answer 3

这实际上可以通过 Navigation API 使用本机功能（目前仅适用于 Chrome、Edge 和 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)));

灵感来自@jason-miller：https://mastodon.online/@[电子邮件受保护]/109865246685541843

Answer 4

替代方案：

没有显示网页实际加载过程的功能。但你可以手动完成，就像你说的！

以下事件在页面完全加载时开始运行，即使在加载所有图像后也是如此：

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