使用JavaScript初始化页面加载浏览器指示器/动画图标。

Question

使用JavaScript初始化页面加载浏览器指示器/动画图标。

javascriptbrowser

8

有没有一种简单的方法可以启动和停止浏览器的 throbber（页面加载指示器），而不改变您所在的页面？最好没有外部库或 AJAX 调用。

- William

2

我从未见过针对此的API，但如果有，我会很感兴趣去了解一下。但是我有点怀疑，特别是关闭功能，似乎这会带来一个安全问题。 - Pointy

6

为什么要费尽周折呢？为什么不直接显示一个动态加载的gif呢？ - Joseph

1

跳动图标表示页面正在从网络加载数据。将其用于其他任何目的可能会让用户感到困惑。 - JJJ

如果加载某些非常CPU密集型的东西，UI将会冻结，这样你永远不会看到动画GIF或进度条。我不认为任何用户会认为加载指示器在加载时有困惑。考虑加载大量行、处理它们并将它们加载到复杂项目渲染器中可能需要几秒钟。在我看来，使用throbber是适当的选择。 - William

2

看起来这似乎是一个新API的候选，这样我们就可以摆脱应用程序使用的无数不同的“加载中...”指示器。但现在似乎没有办法做到这一点。 - Barmar

显示剩余3条评论

3个回答

4

您可以调用一个简单的服务器端脚本，我们将其称为'sleep.cgi'，该脚本将停止执行（休眠），从而延迟某些简单的自我重新加载页面在隐藏的iframe中的交付。这应该使几乎所有主要浏览器显示您所谓的“浏览器闪烁器”（页面加载指示器）。一旦您完成了想要显示闪烁器的任何原因，您只需将上述iframe位置重置为空字符串即可。以下是我的做法:

1）编写一个简单的服务器端脚本，它接收请求并暂停执行长达30秒，以避免击中浏览器的页面加载超时限制。一旦休眠时间结束，该服务器脚本会响应类似以下内容的信息：

<html><body onload="location.reload();"></body></html>

1) 强制循环直到您想要浏览器显示“页面加载”指示器。

2) 编写支持JavaScript函数，以便在请求时启动和停止“throbber”，并添加我们将使用的HTML元素：

<script>
  function startThrobber(){
    document.getElementById('throbberFrame').src='sleep.cgi?'+Math.random();
  }
  function endThrobber(){
    document.getElementById('throbberFrame').src='';
  } 
</script>

<div id="throbberWrapper" style="display:none;visibility:hidden;">
  <iframe id="throbberFrame" style="width:1px;height:1px;"></iframe>
</div>

我已在Chrome/IE/Opera/Firefox上进行了快速测试，似乎正常工作。不过我从未有过任何像这样的需求。

编辑：如果您的Web服务器支持PHP脚本，则可以参考sleep函数文档：http://php.net/manual/en/function.sleep.php 我不写PHP代码，但我认为您的PHP文档应该类似于以下内容：

<html><body onload="location.reload();">
<?php
  // sleep for 29 seconds
  sleep(29);
?>
</body></html>

干杯！

- TildalWave

@William - 另外一个需要考虑的事情是这个“sleep”脚本的缓存控制头。您可能希望在29秒后它能正常工作，因此需要禁用任何浏览器端缓存。您可以通过向PHP脚本添加自定义缓存控制头或修改Web服务器的配置，在请求此脚本时删除任何缓存头来实现此目的。对于PHP，代码将如下（日期为过去时间）：header("Cache-Control: no-cache, must-revalidate"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); - TildalWave

@TildalWave：这会受到“太多重定向”检测的影响吗？ - Lie Ryan

@Lie - 我不确定你的意思是什么？在这个解决方案中并没有重定向，只有简单的加载和重新加载。如果你的问题是关于可能的缓存问题，那么你应该注意到即使页面没有完全重新加载，用户浏览器加载了缓存版本也不是真正的“问题”。除非当然你正在对所提到的服务器端脚本内应使用何种超时（休眠）时间进行某种“智能”检测。这并不是真正必要的，我建议不要过于复杂化它，这就是为什么我没有在答案中提到它的原因。 ;) - TildalWave

这个问题让我想起了另一个需要考虑的事情。如果传递给“throbber”帧的服务器端脚本的位置是绝对路径而不是相对于调用者文档的路径，则最好避免将协议部分添加到路径中，以免引起“混合内容”浏览器警告。基本上，如果使用完整路径，只需省略其中的“http:”或“https:”部分，并以“//”开头。这样，调用者文档的协议将被使用（附加到提供的位置的开头），并且可以避免任何不必要的浏览器警告。 ;) - TildalWave

1

如果加载了某些非常消耗 CPU 的东西，UI 就会冻结，因此您永远看不到动画 GIF 或进度条。

您有一个 XY 问题。您可以使用 setTimeout 将 CPU 密集型操作分成较小的块，以防止浏览器冻结。浏览器 throbber 是一种 UI 元素，用于表示正在从网络加载某些内容；如果您将其用于其他任何原因，则会极其混乱。

- Lie Ryan

这个回答有什么意义，为什么每个人都认为强制显示throbber会被用于加载某些内容以外的其他事情。OP明确描述了他将使用它来指示加载（尽管是Flash内容），这是其预期目的。它与“UI冻结”也没有任何关系，除非以一种真正不应该的方式完成（短循环），我怀疑这不是OP的意图。为什么他要额外努力为用户提供更好的指示，然后为这些相同的用户创建额外的问题，因为具有这样的功能？ - TildalWave

1

@TildalWave：OP有一个XY问题。他并不是真的想要控制浏览器的throbber，他想要的是指示一个CPU绑定进程的进度，使用浏览器的throbber是一个非常不友好的解决方案（即使可以正确地完成而不需要诉诸于具有缓存问题的假ajax调用）。OP指出他不能使用loading GIF的原因是由于UI冻结，在一个正确编写的javascript中这是不必要的。 - Lie Ryan

我真的不明白你从哪里得出了“CPU绑定”的结论。OP所指的“throbber”用于向最终用户指示所请求的文档（以及任何随后的部分）正在下载过程中，它表示网络活动。你可能将其与系统的沙漏图标混淆了。两个并不一定相关的事情。至于问题的表述方式，那只是语义学而已，对我来说和OP喜欢听什么类型的音乐一样重要。问题已经被理解并回答了。此外，如果你不喜欢提问的方式，可以随意编辑它。;) - TildalWave

1

@TildalWave：请查看原帖作者的评论，其中有些是我引用的。原帖作者明确表示他想要用浏览器的“throbber”来指示一个CPU绑定的进程。不，我没有将“throbber”和沙漏混淆。 - Lie Ryan

啊，我现在明白了，那部分让我困惑了，隐藏在“显示更多评论”按钮后面。很抱歉打扰你！你确实正确地说，使用一个指示器来显示另一个不相关进程的活动是相当奇怪的。尽管如此，我仍然可以看到OP所问的有效用途。可能是一个奇怪的解决方法，但如果OP觉得需要（比我们更了解他实际想要的），那么是可能的，而且我不认为它会以任何方式损害最终用户。 - TildalWave

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

12

不行。你可以尝试通过执行ajax调用或其他方式强制它自旋，但这是不好的。浏览器的那部分不是为你而设，而是为浏览器而设！这有点像问你是否可以更改系统时钟，以使包括时间机器的游戏更加真实。

- Rich Bradshaw

6

Flash被认为是网络技术中已经过时的原因之一，它只存在于一个小矩形中，并且由于沙盒保护机制，它无法在自身范围之外做太多事情。浏览器不再闪烁，因为所有内容都已经下载完毕。例如，在Chrome浏览器中，闪烁器会在进行DNS查询时以一种方式旋转，在下载数据时则以另一种方式旋转——这些都不需要占用大量的CPU资源。 - Rich Bradshaw

1

当HTML和JS完全覆盖Flash的全部功能集时，我会认为Flash是一种过时的技术。我们已经接近了这个目标，但还没有完全达到，因此Flash在特定应用程序中仍然是相关的。 - William

为了后人，你认为一个更好的标题是什么？ - William

我想我应该更像Lie Ryan那样回答——问题在于，出于许多好的原因，没有本地API可以做到这一点。Flash无法控制浏览器的chrome，同样也是出于好的原因。您可以通过ajax加载虚拟内容来使throbber旋转，但是a）在问题中指定为非解决方案，b）这是一个我怀疑用户真的不喜欢的黑客行为。William提出了一个明智的问题，概述了他不想要的内容（Ajax调用），我已经通过解释原因和情况来回答了他的问题。我不确定问题在哪里。 - Rich Bradshaw

@William - 你觉得“使用JavaScript初始化页面加载浏览器指示器/动画图标”怎么样？我认为这样就可以了，因为你的标题中提到了“手动”，大多数人都会有问题。在一个句子中同时提到“手动”和“浏览器”显然不是个好主意...再加上“throbber”的话只会让事情变得更糟，而在问题后面提到CPU活动几乎就像是在雪上加霜LOL :D（免责声明：不，我不是Jimmy Car!!!） - TildalWave

显示剩余5条评论