web-dev-qa-db-ja.com

Chromeの読み込みインジケーターがXMLHttpRequest中に回転し続ける

AJAXコメット/ロングポーリングを使用してWebページを最新の状態に保つWebアプリを作成しています。Chromeで、ページが常にロードされているかのように処理します（アイコンタブが回転し続けます）。

これはGoogleにとっては正常なことだと思いましたChrome + Google Waveでもこのような動作があったため、Ajaxでした。

さて、今日私は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);
javascriptajaxgoogle-chromecometlong-polling
31
Martin Konecny

私は恥ずかしがらずにOlegのテストケースを盗み、ロングポーリングをシミュレートするために少し調整しました。

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秒ごとにポーリングします）、テストすることはできません、私はアカウントを持っていないので。

EDIT：そして私はそれを理解しました：読み込みに少しの遅延test.phpを追加した後、可能な限り小さくすることができ、読み込みインジケータload.htmlが読み込まれた後に停止します：

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

どういうわけか、別の答えで コメントで確認済み のように、ブラウザがページのレンダリングを完了するために制御を取り戻すと、インジケータは回転を停止します。別の利点は、要求を押すことによって中止できないことです Esc。

36
Marcel Korpel

私の一般的な答えで申し訳ありませんが、よりブラウザに依存しないプログラムが必要な場合は、低レベルのXMLHttpRequestおよびActiveXObject（ "Microsoft.XMLHTTP"）の代わりにjQueryまたはその他のお気に入りのライブラリを使用する必要があります。

編集済み：2つの非常に単純なHTMLファイルを作成します：test.htmとload.htmをWebサイトの同じディレクトリに配置します（これを試してください） 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>
2
Oleg

JQueryまたはAjaxについてはわかりませんが、スニペットマネージャーを使用してAceエディターにスニペットを挿入することで同様の問題がありました。ページの読み込み中にエディタにコードを挿入すると、ページが読み込まれないように見えます-タブアイコンが永久に回転します。 .setTimeout()の動作は非常に一貫していません。ページの読み込みが非常に速い場合は機能しますが、ページの読み込みが遅い場合は機能しません。これは、$(document).ready()で何もラップしていなかったためか、ドキュメントの本文の最後でコードを呼び出すだけでした。

これが、永続的に回転するタブアイコンの問題に対して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' );
});
0
knod