Chrome的加载指示器在XMLHttpRequest期间保持旋转

小编典典

Chrome的加载指示器在XMLHttpRequest期间保持旋转

ajax

我正在编写一个使用Comet / Long Polling保持Web页面最新的AJAX
Web应用程序，我注意到在Chrome中，它将页面视为始终处于加载状态（选项卡的图标不断旋转）。

我认为这对于Google Chrome + Ajax来说是正常的，因为即使Google Wave也有这种行为。

好吧，今天我注意到Google Wave不再保持加载图标旋转，有人知道他们是如何解决的吗？

这是我的ajax通话代码

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);

阅读 273

2020-07-26

共1个答案

小编典典

我无耻地偷了Oleg的测试用例，并对其进行了一些调整以模拟长轮询。

load.html：

<!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php：

<?php
  sleep(5);
?>
<b>OK!</b>

结果很有趣：在Firefox和Opera中，在XMLHTTPRequests中没有显示加载指示器。Chrome让它旋转…我怀疑GoogleWave不再使用长时间轮询（例如，每隔X秒轮询一次，以节省资源），但是由于没有帐户，我无法对其进行测试。

编辑： 并且我弄清楚了：在加载中添加了一点延迟之后test.php，该延迟可以尽可能小，在加载后加载指示器停止load.html：

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

正如对另一个答案的评论所证实的那样，当浏览器重新获得控制权以完成页面渲染时，指示器会停止旋转。另一个优点是不能通过按来中止请求Esc。

2020-07-26