Question

我正在编写一个使用Comet / Long Polling来保持网页最新的AJAX网络应用程序，我注意到在Chrome中，它会将页面视为始终加载（标签图标不断旋转）。

我认为这对谷歌Chrome + Ajax来说是正常的，因为即使谷歌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);

Answer 1

我无耻地偷走了奥列格的测试用例并调整了一下以模拟长轮询。

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让它旋转...我怀疑Google Wave不再使用长轮询（例如，每隔X秒轮询一次，以节省资源），但我无法测试它，因为我没有帐户

编辑我想出来了：在加载test.php后稍加延迟（可能会尽可能小）后，加载指示会在load.html之后停止已装载：

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

不知怎的，就像另一个答案的confirmed in a comment一样，当浏览器控制回到完成页面渲染时，指示器停止旋转。另一个优点是按 Esc 不能中止请求。

Answer 2

很抱歉我的一般答案，但如果你想拥有一个更独立于浏览器的程序，你应该使用jQuery或其他你喜欢的库而不是低级XMLHttpRequest和ActiveXObject（“Microsoft.XMLHTTP”）。

<强>编辑：我创建了两个非常简单的HTML文件：test.htm和load.htm，并放在网站上的同一目录中（尝试这一个URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm）。我看不出你在问题中描述的效果。将这些文件与您的示例进行比较，您将解决您的问题。

load.htm：

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

TEST.HTM：

<b>OK!</b>

Answer 3

我不确定jQuery或Ajax，但是我在使用Snippet Manager将片段插入Ace Editor时遇到了类似的问题。在页面加载时将代码插入编辑器时，页面似乎永远不会加载 - 选项卡图标将永远旋转。 .setTimeout()只是非常不一致地工作。当页面加载速度非常快时，它会起作用，但当页面加载速度较慢时则不行。这可能是因为我没有在$(document).ready()中包装任何内容 - 我只是在文档正文的末尾调用我的代码。

这是我发现的永久旋转标签图标问题的无jQuery解决方案：

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

就我而言，// load whatever是：

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

Answer 4

使用此功能

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};

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

4 个答案: