indicateur de chargement de Chrome continue à tourner pendant XMLHttpRequest

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

Question

Je vous écris une application web AJAX qui utilise Comet / Long Polling pour maintenir la page Web à jour, et je remarqué dans Chrome, il traite la page comme si elle le chargement toujours (icône de l'onglet continue à tourner).

Je pensais que c'était normal pour Google Chrome + Ajax parce que même Google Wave a ce comportement.

Eh bien aujourd'hui, j'ai remarqué que Google Wave ne se conserve plus longtemps l'icône de chargement filer, quelqu'un sait comment ils ont fixé cela?

Voici mon code d'appel 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);
Était-ce utile?

La solution

Je récupéré sans vergogne le cas de test Oleg et ajusté un peu pour simuler à long polling.

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>

Le résultat est intéressant: dans Firefox et Opera, aucun indicateur de chargement est affiché pendant XMLHttpRequests. Chrome laisse filer ... Je soupçonne que Google Wave n'utilise pas plus longtemps polling (mais, par exemple, les sondages tous les X secondes, pour économiser les ressources), mais je ne peux pas tester, comme je n'ai pas un compte .

EDIT: Et j'ai tout compris: après avoir ajouté un peu de retard dans test.php de chargement, qui peut être aussi faible que possible, l'indicateur de chargement arrête après load.html a été chargé: 

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

D'une certaine façon, comme a confirmé dans un commentaire sur une autre réponse, lorsque le navigateur revient de contrôle à la page d'arrivée rendu, l'indicateur cesse de tourner. Un autre avantage est que la demande ne peut être annulée en appuyant sur Esc .

Autres conseils

Désolé pour ma réponse générale, mais si vous voulez avoir un programme qui sont plus indépendants du navigateur, vous devez utiliser jQuery ou tout autre votre bibliothèque préférée au lieu de bas niveau XMLHttpRequest et ActiveXObject ( « Microsoft.XMLHTTP »).

ÉDITÉ: Je crée deux fichiers HTML très simple: test.htm et load.htm et placé là dans le même répertoire sur un site Web (essayez celui-ci URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm ). Je ne vois pas l'effet que vous décrit en vous la question. Comparez ces fichiers avec vos exemples et vous permettra de résoudre votre problème.

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>

Je ne suis pas sûr de jQuery ou Ajax, mais j'ai eu un problème similaire avec l'insertion d'extraits dans Ace Editor avec le Snippet Manager. Lorsque vous insérez le code dans le droit de l'éditeur lorsque la page chargeait la page semble ne jamais charger - l'icône de l'onglet tournerait toujours. .setTimeout() ne fonctionnait très incohérente. Il fonctionnerait lorsque la page chargée très rapidement, mais pas lorsque la page chargée plus lentement. Cela pourrait être parce que je ne rien aluminuim $(document).ready() -. Je ne faisais que mon code appelle à la fin du corps du document

Voici une solution sans jQuery j'ai trouvé à mon problème d'icône pour toujours onglet filage: 

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

Dans mon cas, // load whatever était: 

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

utiliser cette fonction 

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;
};
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top