Javascript Chrome 的加载指示器在 XMLHttpRequest 期间不断旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2703861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome's loading indicator keeps spinning during XMLHttpRequest
提问by Martin Konecny
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).
我正在编写一个 AJAX 网络应用程序，它使用 Comet/Long Polling 来使网页保持最新状态，我注意到在 Chrome 中，它将页面视为始终在加载（选项卡的图标不断旋转）。
I thought this was normal for Google Chrome + Ajax because even Google Wave had this behaviour.
我认为这对于 Google 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);
回答by Marcel Korpel
I shamelessly stole Oleg's test case and adjusted it a bit to simulate long-polling.
我无耻地偷了 Oleg 的测试用例，并对其进行了一些调整以模拟长轮询。
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. 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.
结果很有趣：在 Firefox 和 Opera 中，在 XMLHTTPRequests 期间没有显示加载指示器。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.htmlhas been loaded:
编辑：我想通了：在加载中添加一点延迟后test.php，可以尽可能小，加载指示器在加载后停止load.html：
jQuery(document).ready(function() {
setTimeout(function () {
$('#main').load("test.php");
}, 0);
});
Somehow, as is confirmed in a commenton 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。
回答by Oleg
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). I can't see effect which you describes in you question. Compare this files with your examples and you will solve your problem.
编辑：我创建了两个非常简单的 HTML 文件：test.htm 和 load.htm，并将它们放在网站上的同一目录中（试试这个 URL http://www.ok-soft-gmbh.com/jQuery/load /load.htm）。我看不到你在问题中描述的效果。将此文件与您的示例进行比较，您将解决您的问题。
load.htm:
加载.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:
测试.htm：
<b>OK!</b>
回答by knod
I'm not sure about jQuery or Ajax, but I had a similar problem with inserting snippets into Ace Editor with the Snippet Manager. 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. 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.
我不确定 jQuery 或 Ajax，但我在使用代码段管理器将代码段插入 Ace 编辑器时遇到了类似的问题。在页面加载时将代码插入编辑器时，页面似乎永远不会加载 - 选项卡图标将永远旋转。.setTimeout()只是工作非常不一致。当页面加载速度非常快时它会起作用，但当页面加载速度较慢时则不起作用。那可能是因为我没有包装任何东西$(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 whateverwas:
就我而言，// load whatever是：
ace.config.loadModule('ace/ext/language_tools', function () {
myEditorInstance.insertSnippet( 'some string' );
});
回答by cosy
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;
};
