¿Mostrando un spinner durante una solicitud de AJAX?

Question

¿cuál es la mejor manera de mostrar un girador?

He preparado un div (id = "spinner"), que debería estar visible durante la carga.

Answer 1

¿Usas jQuery?

Si lo que puede utilizar:

ajaxStart & ajaxStop: http://docs.jquery.com/Ajax

Por ejemplo:

$(function(){ 

    // hide it first 
    $("#spinner").hide(); 

    // when an ajax request starts, show spinner 
    $.ajaxStart(function(){ 
     $("#spinner").show(); 
    }); 

    // when an ajax request complets, hide spinner  
    $.ajaxStop(function(){ 
     $("#spinner").hide(); 
    }); 
}); 

Puede ajustar un poco con un contador de petición de que los incrementos y decrementos en caso de que tiene muchas solicitudes simultáneas

Si no usa jQuery, consulte el código fuente de jQuery para el cual los eventos ajaxStart realmente se registran en javascript antiguos y simples.

HTH Alex

Answer 2

$().ajaxSend(function(r, s) { 
    $("#spinner").show(); 
}); 

$().ajaxStop(function(r, s) { 
    $("#spinner").fadeOut("fast"); 
}); 

Answer 3

que utiliza esta aplicación en mi rieles. Esto funcionó para mí:

$(document).ajaxSend(function(r, s) { 
$("#spinner").show();}); 


$(document).ajaxStop(function(r, s) { 
$("#spinner").fadeOut("fast");});