Chrome的加载指示灯一直在XMLHtt prequest纺 [英] Chrome's loading indicator keeps spinning during XMLHttpRequest

查看:131
本文介绍了Chrome的加载指示灯一直在XMLHtt prequest纺的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在写一个AJAX的Web应用程序,使用彗星/长轮询保持网页更新,而且我注意到,在Chrome浏览器,它把该页面,如果它总是加载(图标的选项卡都在旋转)。

我认为这是正常的谷歌浏览器+ Ajax的,因为即使谷歌Wave有这种行为。

好了,今天我注意到,谷歌Wave不再保持加载图标纺纱,任何人都知道他们是怎么定的?

下面是我的ajax调用code

  VAR xmlHtt preQ = FALSE;
// Mozilla的/ Safari浏览器
如果(window.XMLHtt prequest){
   xmlHtt preQ =新XMLHtt prequest();
}
// IE
否则,如果(window.ActiveXObject){
   xmlHtt preQ =新的ActiveXObject(Microsoft.XMLHTTP);
}
xmlHtt preq.open(GET,myURL,真正的);
xmlHtt preq.setRequestHeader(内容类型,应用程序/ x-WWW的形式urlen codeD');
xmlHtt preq.onreadystatechange =功能(){
   如果(xmlHtt preq.readyState == 4){
      的updatePage(xmlHtt preq.responseText);
   }
}
xmlHtt preq.send(空);
 

解决方案

我无耻地窃取了奥列格的测试用例和调整,有点模仿长轮询。

load.html

 <!DOCTYPE HTML>
< HEAD>
  <标题>将jQery.load问题&LT示范; /标题>
  &所述;脚本的src =的http://$c$c.jquery.com/jquery-latest.js>&所述; /脚本>
  <脚本>
  jQuery的(文件)。就绪(函数(){
    $('#主)的负载(test.php的)。
  });
  < / SCRIPT>
< /头>
<身体GT;
  < D​​IV ID ='主'>< / DIV>
< /身体GT;
< / HTML>
 

的test.php

 < PHP
  睡眠(5);
?>
< B>确定<!/ B>
 

结果很有趣:在Firefox和Opera,没有加载指示灯在XMLHTT prequests所示。 Chrome浏览器让它旋转......我怀疑谷歌Wave不使用长轮询了(但是,例如,调查每X秒,以节省资源),但我不能测试它,因为我没有一个帐户

编辑:我想通了:加入少许延迟加载的test.php ,它可以尽可能小后,后加载指示灯停止 load.html 已加载:

  jQuery的(文件)。就绪(函数(){
  的setTimeout(函数(){
    $('#主)的负载(test.php的)。
  },0);
});
 

不知怎么的,为的是<一个href="http://stackoverflow.com/questions/1064782/stop-the-browser-throbber-of-doom-while-loading-comet-server-push-iframe/1066729#comment-894061">confirmed在评论在另一个答案,当浏览器获得控制回来完成网页渲染,指示停止旋转。另一个优点是,该请求不能被pressing中止 Esc键

I'm writing an AJAX web app that uses Comet/Long Polling to keep the web page up to date, and I noticed in Chrome, it treats the page as if it's always loading (icon for the tab keeps spinning).

I thought this was normal for Google Chrome + Ajax because even Google Wave had this behaviour.

Well today I noticed that Google Wave no longer keeps the loading icon spinning, anyone know how they fixed this?

Here's my ajax call code

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

解决方案

I shamelessly stole Oleg's test case and adjusted it a bit to simulate long-polling.

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>

The result is interesting: in Firefox and Opera, no loading indicator is shown during XMLHTTPRequests. Chrome lets it spinning... I suspect Google Wave doesn't use long polling anymore (but, for instance, polls every X seconds, to save resources), but I can't test it, as I don't have an account.

EDIT: And I figured it out: after adding a little delay in loading test.php, which can be as small as possible, the loading indicator stops after load.html has been loaded:

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

Somehow, as is confirmed in a comment on another answer, when the browser gets control back to finish page rendering, the indicator stops spinning. Another advantage is that the request cannot be aborted by pressing Esc.

这篇关于Chrome的加载指示灯一直在XMLHtt prequest纺的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆