Chrome的加载指示器在XMLHttpRequest期间保持旋转
[英]Chrome's loading indicator keeps spinning during XMLHttpRequest
问题描述
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). 
我正在编写一个使用Comet / Long Polling来保持网页最新的AJAX网络应用程序，我注意到在Chrome中，它会将页面视为始终加载（标签图标不断旋转）。
I thought this was normal for Google Chrome + Ajax because even Google Wave had this behaviour. 我认为这对谷歌Chrome + Ajax来说是正常的，因为即使Google Wave也有这种行为。
Well today I noticed that Google Wave no longer keeps the loading icon spinning, anyone know how they fixed this? 那么今天我注意到Google Wave不再保持加载图标旋转，任何人都知道他们如何解决这个问题？
Here's my ajax call code 这是我的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 个解决方案
解决方案1
36 已采纳 2010-04-26 13:00:02
I shamelessly stole Oleg's test case and adjusted it a bit to simulate long-polling. 我无耻地偷走了奥列格的测试用例并稍微调整了一下以模拟长轮询。
load.html : 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 : test.php ：
<?php
sleep(5);
?>
<b>OK!</b>
The result is interesting: in Firefox and Opera, no loading indicator is shown during XMLHTTPRequests. 结果很有趣：在Firefox和Opera中，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. Chrome让它旋转...我怀疑Google Wave不再使用长轮询（但是，例如，每隔X秒轮询以节省资源），但我无法测试它，因为我没有帐户。
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: 编辑：我想通了：在加载test.php后加一点延迟，这可能会尽可能小，加载指示符在load.html加载后停止：
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 . 另一个优点是按Esc不能中止请求。
解决方案2
2 2010-04-24 09:17:00
Sorry for my general answer, but if you want to have a program which are more browser independent you should use jQuery or other your favorite library instead of low level XMLHttpRequest and ActiveXObject("Microsoft.XMLHTTP"). 很抱歉我的一般答案，但如果你想拥有一个更独立于浏览器的程序，你应该使用jQuery或其他你喜欢的库而不是低级XMLHttpRequest和ActiveXObject（“Microsoft.XMLHTTP”）。
EDITED: I create two very simple HTML files: test.htm and load.htm and placed there in the same directory on a web site (try this one URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm ). 编辑：我创建了两个非常简单的HTML文件：test.htm和load.htm，并放在网站上的同一目录中（试试这个URL http://www.ok-soft-gmbh.com/jQuery/load /load.htm ）。 I can't see effect which you describes in you question. 我看不出你在问题中描述的效果。 Compare this files with your examples and you will solve your problem. 将这些文件与您的示例进行比较，您将解决您的问题。
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: TEST.HTM：
<b>OK!</b>
解决方案3
0 2016-07-18 23:29:51
I'm not sure about jQuery or Ajax, but I had a similar problem with inserting snippets into Ace Editor with the Snippet Manager. 我不确定jQuery或Ajax，但是我在使用Snippet Manager将片段插入Ace Editor时遇到了类似的问题。 When inserting code into the editor right when the page was loading the page would seem to never load - the tab icon would spin forever. 在页面加载时将代码插入编辑器时，页面似乎永远不会加载 - 选项卡图标将永远旋转。 .setTimeout() only worked very inconsistently. .setTimeout()只能非常不一致地工作。 It would work when the page loaded very quickly, but not when the page loaded more slowly. 当页面加载速度非常快时，它会起作用，但当页面加载速度较慢时则不行。 That might be because I wasn't wrapping anything in $(document).ready() - I was only calling my code at the end of the document body. 这可能是因为我没有在$(document).ready()包装任何东西 - 我只是在文档正文的末尾调用我的代码。
Here's a no-jQuery solution I found to my forever-spinning tab icon problem: 这是我发现的永久旋转选项卡图标问题的无jQuery解决方案：
var tillPageLoaded = setInterval(function() {
if( document.readyState === 'complete' ) {
clearInterval(tillPageLoaded);
// load whatever
}
}, 5);
In my case, // load whatever was: 在我的情况下， // load whatever ：
ace.config.loadModule('ace/ext/language_tools', function () {
myEditorInstance.insertSnippet( 'some string' );
});
解决方案4
-3 2010-04-24 09:20:49
use this function 使用此功能
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 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.