Индикатор загрузки Chrome продолжает вращаться во время XMLHttpRequest
Я пишу веб-приложение Ajax, которое использует Опрос Кометы / Долгий Опрос, чтобы усовершенствовать веб-страницу, и я заметил в 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);
3 ответа
Я бесстыдно украл тестовый пример Олега и немного подправил его, чтобы имитировать длинный опрос.
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>
используйте эту функцию
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;
};