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



有没有一种简单的方法来启动和停止浏览器throbber(页面加载指示器)而不更改您的页面?最好没有外部库或AJAX调用。

no。您可以尝试通过执行Ajax呼叫或其他任何方式来迫使它旋转,但不要。浏览器的那部分不适合您,它是用于浏览器!

这有点像问您是否可以更改系统时钟,以便包括时间机器的游戏更现实。

您可以调用一个简单的服务器端脚本,让我们称其为'sleep.cgi',它将停止执行(睡眠),然后延迟提供一些简单的自我填充页面隐藏的iframe。这将使几乎所有主要的浏览器显示您称为"浏览器Throbber"(页面加载指示器)的内容。一旦以任何原因都希望显示throbber,就可以将提到的iframe位置重置为空字符串。这就是我的方式:

1)编写一个简单的服务器端脚本,该脚本获取请求并停止执行长达30秒,而不想击中浏览器的页面加载超时墙。睡眠期结束后,此服务器脚本将以以下方式响应:

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

强迫它循环,直到您希望浏览器显示"加载页面"指示器。

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脚本,则是睡眠功能参考:http://php.net/manual/enual/en/function.sleep.php,我不在PHP中写,但我相信您的PHP文档应该应该沿着:

的方式看一些东西
<html><body onload="location.reload();">
<?php
  // sleep for 29 seconds
  sleep(29);
?>
</body></html>

欢呼!

如果加载了非常密集的东西,则UI会冻结,因此您永远不会看到动画的GIF或进度栏。

您有一个XY问题。您可以通过使用SettiMeout将CPU密集型操作分为较小的块来防止浏览器冻结。浏览器Throbber是一个UI元素,它信号从网络加载。如果您出于任何其他原因使用它,那将是非常令人困惑的。

最新更新