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

【问题标题】：How to manually show tab loading indicator via javascript?如何通过javascript手动显示标签加载指示器？
【发布时间】：2017-01-09 05:06:24
【问题描述】：

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

铬：

Firefox（带有 TreeTab 插件）：

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

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

【问题讨论】：

我认为你需要像jQuery(document).ready(function() { setTimeout(function() { .... }, 2000); }); 这样的东西 - 我很感激没有指定 jQuery！怀疑这是否可行..
@DanielShillcock 抱歉，我不太明白。我应该在超时内设置什么以使页面看起来仍在加载？
对不起。大声思考。也许像下面这样的东西可以工作？ document.onreadystatechange = function() { if (this.readyState === "complete"){ //Set readyState back to false until you wish for the spinner to disappear } };
@DanielShillcock readyState 是只读的，不能自己设置。
我不知道这样的“功能”为什么/如何有用……但实现它的最佳方法可能是实际加载一些东西，比如图像，并让服务器以非常缓慢的速度响应数据。（尽管加载嵌入式资源是否仍然使微调器显示可能取决于浏览器。）

标签： javascript html browser spinner loading

【解决方案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

编辑：

添加代码sn-p

代码 sn-p：

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

【讨论】：

我不是在谈论在页面上显示加载指示器，而是在浏览器选项卡上显示加载指示器，就像它总是在页面加载时显示一样。请看一下原始帖子中的图片，了解我的意思。
就像我说的：没有加载功能，这是显示加载进度的唯一选项。我明白你的意思，但请阅读 cmets 我是唯一给你一个替代方案的人
是的，我知道它不能直接完成，只能通过一些 hack。不过，现在发布了一个可行的解决方案，因此并非无法访问。

【解决方案2】：

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

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;

}

【讨论】：

谢谢，这似乎工作得很好！我认为这很容易做到，因此用户不必加载大量无用的数据，只需让服务器以非常慢的速度响应或不响应并挂起直到超时。
如果您对服务器有一定的控制权，您可以创建一个从不发送其正文而不是一些巨大文档的特殊页面。这样可以节省带宽。

【解决方案3】：

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

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

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

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

【讨论】：