Chrome的加载指示器在XMLHTTPRequest期间不断旋转

StackOverflow https://stackoverflow.com/questions/2703861

题

我正在编写一个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);
有帮助吗？

解决方案

我无耻地偷走了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允许它旋转...我怀疑Google Wave不再使用长期的投票（例如，每x秒进行一次民意调查，以节省资源），但是我无法测试它，因为我没有帐户。

编辑： 我发现了这一点：在加载时添加了一点延迟后 test.php, ，可能会尽可能小，加载指示器在此之后停止 load.html 已加载：

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

不知何故， 在评论中确认 在另一个答案上，当浏览器重新控制以完成页面渲染时，指示器停止旋转。另一个优点是，请求无法通过按下来暂停该请求 Esc键.

其他提示

对不起，我的一般答案，但是如果您想拥有一个更独立浏览器的程序，则应使用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>

我不确定jQuery或Ajax，但是我在与摘要管理器中插入ACE编辑器时也有类似的问题。当页面加载页面时，将代码直接插入编辑器时，似乎永远不会加载 - 选项卡图标将永远旋转。 .setTimeout() 仅工作非常不一致。当页面加载非常快时，它将起作用，但是当页面加载速度较慢时，它不会工作。那可能是因为我没有包装任何东西 $(document).ready() - 我只是在文档主体末尾调用我的代码。

这是我在我的永远旋转选项卡图标问题上找到的一个无杂项解决方案：

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' );
});

使用此功能

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;
};
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top