代码之家 › 专栏 › 技术社区 › Martin Konecny

chrome的加载指示器在xmlhttprequest期间一直在旋转

long-polling comet google-chrome ajax javascript

31

Martin Konecny · 技术社区 · 15 年前

我正在编写一个ajax web应用程序,它使用comet/long轮询来保持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);

4 回复 | 直到 9 年前

1

36

Community CDub 8 年前

我不知羞耻地窃取了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中,xmlhttprequest期间不显示加载指示器。铬让它旋转…我怀疑google wave不再使用长轮询(但是,例如,每x秒轮询一次,以节省资源),但是我无法测试它,因为我没有帐户。

编辑: 我想起来了:在加载过程中增加了一点延迟 测试程序 ,尽可能小,装载指示器在 加载文件 已加载:

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

不知何故 confirmed in a comment 另一个答案是,当浏览器恢复控制以完成页面呈现时,指示器停止旋转。另一个优点是,按 ESC .

2

Oleg 15 年前

对不起,我的一般回答是,如果你想有一个更独立于浏览器的程序,你应该使用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>

测试:HTM:

<b>OK!</b>

3

0

knod 9 年前

我不确定jquery或ajax,但是我在使用snippet manager将代码片段插入ace编辑器时遇到了类似的问题。当在页面加载时将代码插入编辑器时,页面似乎永远不会加载-选项卡图标将永远旋转。 .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' );
});

4

-3

Matt 15 年前

使用此功能

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