Индикатор загрузки Chrome продолжает вращаться во время XMLHTTPREQUEST

StackOverflow https://stackoverflow.com/questions/2703861

Вопрос

Я пишу веб-приложение Ajax, которое использует комета / длинный опрос, чтобы сохранить веб-страницу до настоящего времени, и я заметил в Chrome, она относится к странице, как будто она всегда загружается (значок для вкладки продолжает вращаться).

Я думал, что это нормально для Google Chrome + Ajax, потому что даже волна Google имела такое поведение.

Ну, сегодня я заметил, что волна Google больше не держит загрузку значка, вращающегося, кто-нибудь знают, как они исправили это?

Вот мой код вызова 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);
Это было полезно?

Решение

Я бесстыдно украл тестовый корпус Олега и немного отрегулировал его, чтобы имитировать долговечности.

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. Chrome позволяет ему вращаться ... Я подозреваю, что Google Wave не использует длинный опрос (но, например, опросы каждые x секунды, для экономии ресурсов), но я не могу ее проверить, так как у меня нет учетной записи Отказ

РЕДАКТИРОВАТЬ: И я понял это: после добавления небольшой задержки в загрузке test.php, который может быть максимально небольшим, индикатор загрузки останавливается после load.html был загружен:

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

Как-то, как есть подтверждено в комментарии В другом ответе, когда браузер вернет контроль к окончанию рендеринга страницы, индикатор останавливает вращение. Еще одно преимущество заключается в том, что запрос не может быть прерван нажатием Esc..

Другие советы

Извините за мой общий ответ, но если вы хотите иметь программу, которая больше не зависит от браузера, вы должны использовать jQuery или другую любимую библиотеку вместо низкого уровня xmlhtttrequest и 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>

Я не уверен в jQuery или ajax, но у меня была похожая проблема с установкой фрагментов в редактор ACE с менеджером фрагмента. При вставке кода в редактор прямо при загрузке страницы страница, кажется, никогда не загружается - значок вкладки будет вращаться навсегда. .setTimeout() работал только очень непоследовательно. Это будет работать, когда страница загружена очень быстро, но не когда страница загружена медленнее. Это может быть потому, что я ничего не упаковал в $(document).ready() - Я только назвал моим кодом в конце кузова документа.

Вот решение No-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' );
});

Используйте эту функцию

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 с атрибуция
Не связан с StackOverflow
scroll top