¿Cómo se muestra un indicador de "ocupado" giratorio en un punto específico de una página web?¿Cómo mostrar un indicador de "ocupado" con jQuery?
Quiero iniciar/detener el indicador cuando comienza o finaliza una solicitud Ajax.
¿Realmente se trata solo de mostrar u ocultar un gif animado, o hay una solución más elegante?
puede simplemente mostrar/ocultar un gif, sino que también puedes inserta eso en ajaxSetup, por lo que se invoca en cada solicitud de ajax.
$.ajaxSetup({
beforeSend:function(){
// show gif here, eg:
$("#loading").show();
},
complete:function(){
// hide gif here, eg:
$("#loading").hide();
}
});
Una nota es que si usted quiere hacer una petición AJAX específico sin tener el control de giro de carga, puede hacerlo de esta manera:
$.ajax({
global: false,
// stuff
});
De esta forma el anterior $ .ajaxSetup que hizo la voluntad no afecta la solicitud con global: false.
Más detalles disponibles en: http://api.jquery.com/jQuery.ajaxSetup
Sí, es solo una cuestión de mostrar u ocultar un gif animado.
De acuerdo. Mostrar/ocultar una imagen es fácil y comprensible para todos los navegadores. Hay un par de complementos jquery rotar para las imágenes, pero no funcionarán en todos los navegadores. –
@mike mi solución está funcionando bien para mi proyecto en todos los navegadores, ¿crees que es un buen enfoque – kobe
lo hice en mi proyecto,
hacer un div con url tierra de nuevo como GIF, que no es sino GIF animados
<div class="busyindicatorClass"> </div>
.busyindicatorClass
{
background-url///give animation here
}
en su llamada ajax, añadir esta clase para el div y en ajax éxito eliminar la clase.
Hará el truco thatsit.
hágamelo saber si necesita antthing más, puedo darle más detalles
en el éxito Ajax Quitar la clase
success: function(data) {
remove class using jquery
}
que tienden a simplemente mostrar/ocultar un IMG como otros han dicho. He encontrado un buen sitio web que genera "carga" de gifs
Link Acabo de ponerlo dentro de un div y oculto por defecto display: none; (CSS) a continuación, cuando se llama a la función de presentación de la imagen, una vez que su piel completa de nuevo.
+1 para el enlace – Habib
La documentación de jQuery recomienda hacer algo como lo siguiente:
$(document).ajaxStart(function() {
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
Dónde #loading es el elemento con su indicador de ocupado en ella.
Referencias:
Además, jQuery.ajaxSetup API recomienda explícitamente evitando jQuery.ajaxSetup para éstos:
Nota: Las funciones de devolución de llamada globales deben establecerse con su respectiva Aja global x métodos de controlador de eventos -
.ajaxStart(),.ajaxStop(),.ajaxComplete(),.ajaxError(),.ajaxSuccess(),.ajaxSend()- más que en el objetooptionspara$.ajaxSetup().
Estos parecen más útiles que antes Enviar y completar, porque ajaxStart "... registrará un controlador para ser llamado cuando comience la primera solicitud Ajax" y ajaxStop lo hará "... Registrar un controlador para llamar cuando todas las solicitudes Ajax se han completado ": manejan los mensajes asincrónicos simultáneos y no ocultan el indicador" espere por favor "prematuramente. – gap
lo hice en mi proyecto:
Global Events en application.js:
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
"carga" es el elemento para mostrar y ocultar!
Referencias: http://api.jquery.com/Ajax_Events/
que tuvieron que utilizar
HTML:
<img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />
In script file:
// invoked when sending ajax request
$(document).ajaxSend(function() {
$("#loading").show();
});
// invoked when sending ajax completed
$(document).ajaxComplete(function() {
$("#loading").hide();
});
hilo viejo, pero quería poner al día ya que he trabajado en este problema hoy en día, no tuve jQuery en mi proyecto, de modo que hice es la forma simple de JavaScript, también necesitaba bloquear el contenido en la pantalla para en mi xhtml
<img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>
en mi Javascript
document.getElementsByClassName('myclass').style.opacity = '0.7'
document.getElementById('loading').style.display = "block";
Para extender la solución de Rodrigo un poco - para las peticiones que se ejecutan con frecuencia, es posible que desee mostrar la imagen de carga si la solicitud lleva más de un intervalo de tiempo mínimo, de lo contrario la imagen se estar continuamente apareciendo y desapareciendo rápidamente
var loading = false;
$.ajaxSetup({
beforeSend: function() {
// Display loading icon if AJAX call takes >1 second
loading = true;
setTimeout(function() {
if (loading) {
// show loading image
}
}, 1000);
},
complete: function() {
loading = false;
// hide loading image
}
});
¡Buena pregunta! –