javascript - habilitar - El indicador de carga de Chrome sigue girando durante XMLHttpRequest
instalar javascript (4)
Despreocupadamente robé el estuche de prueba de Oleg y lo ajusté un poco para simular un largo sondeo.
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>
El resultado es interesante: en Firefox y Opera, no se muestra ningún indicador de carga durante XMLHTTPRequests. Chrome lo deja girar ... Sospecho que Google Wave ya no usa encuestas largas (pero, por ejemplo, encuestas cada X segundos, para ahorrar recursos), pero no puedo probarlo, ya que no tengo una cuenta .
EDITAR: Y lo descubrí: después de agregar un poco de retraso en la carga de test.php , que puede ser lo más pequeño posible, el indicador de carga se detiene después de load.html :
jQuery(document).ready(function() {
setTimeout(function () {
$(''#main'').load("test.php");
}, 0);
});
De alguna manera, como se confirma en un comentario sobre otra respuesta, cuando el navegador obtiene el control de nuevo para finalizar la representación de la página, el indicador deja de girar. Otra ventaja es que la solicitud no puede abortarse presionando Esc .
Estoy escribiendo una aplicación web AJAX que usa Comet / Long Polling para mantener la página web actualizada, y noté que en Chrome, trata la página como si siempre se estuviera cargando (el ícono de la pestaña sigue girando).
Pensé que esto era normal para Google Chrome + Ajax porque incluso Google Wave tenía este comportamiento.
Bueno, hoy noté que Google Wave ya no hace que el icono de carga siga girando, ¿alguien sabe cómo arreglaron esto?
Aquí está mi código de llamada 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);
No estoy seguro de jQuery o Ajax, pero tuve un problema similar al insertar fragmentos en Ace Editor con el administrador de fragmentos. Al insertar el código en el editor justo cuando la página se estaba cargando, parece que la página nunca se cargó: el ícono de la pestaña giraría para siempre. .setTimeout() solo funcionó de manera muy inconsistente. Funcionaría cuando la página se cargue muy rápido, pero no cuando la página cargó más lentamente. Eso podría deberse a que no estaba envolviendo nada en $(document).ready() - Solo estaba llamando a mi código al final del cuerpo del documento.
Aquí hay una solución sin jQuery que encontré para mi problema con el ícono de la pestaña que gira constantemente:
var tillPageLoaded = setInterval(function() {
if( document.readyState === ''complete'' ) {
clearInterval(tillPageLoaded);
// load whatever
}
}, 5);
En mi caso, // load whatever :
ace.config.loadModule(''ace/ext/language_tools'', function () {
myEditorInstance.insertSnippet( ''some string'' );
});
Perdón por mi respuesta general, pero si quieres tener un programa que sea más independiente del navegador, debes usar jQuery u otra tu biblioteca favorita en lugar de bajo nivel XMLHttpRequest y ActiveXObject ("Microsoft.XMLHTTP").
EDITADO: creo dos archivos HTML muy simples: test.htm y load.htm y los coloco allí en el mismo directorio en un sitio web (pruebe esta URL http://www.ok-soft-gmbh.com/jQuery/load/load.htm ). No puedo ver el efecto que describes en tu pregunta. Compare estos archivos con sus ejemplos y resolverá su problema.
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>
usa esta función
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;
};