Visualizzazione di uno spinner durante una richiesta AJAX?

Question

qual è il modo migliore per mostrare uno spinner?

Ho preparato un div (id = "spinner"), che dovrebbe essere visibile durante il caricamento.

Answer 1

Utilizzi jQuery?

Se in modo da poter utilizzare:

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

Ad esempio:

$(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(); 
    }); 
}); 

È possibile ottimizzare un po 'con un contatore richiesta di incrementi e decrementi nel caso in cui hanno un sacco di richieste simultanee.

Se non si utilizza jQuery, controllare il codice sorgente jQuery per cui eventi ajaxStart si registrano effettivamente in plain javascript.

HTH Alex

Answer 2

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

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

Answer 3

ho usato questo nella mia applicazione Rails. Questo ha funzionato per me:

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


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