Loading ajax jquery

loading jquery

Chi utilizza jquery non può non aver utilizzato il metodo Ajax per effettuare una chiamata asincrona.
Spesso quando si utilizza questo metodo possono passare alcuni secondi tra la chiamata e la risposta del server.

In questo tempo di attesa, l’utente può effettuare qualsiasi altra operazione, anche ripetere la chiamata che è in fase di elaborazione. Per questo motivo è meglio prevedere questa situazione, magari mostrando un loading mentre la chiamata ajax viene effettuata.

Per inserire un loading c’è bisogno prima di creare un div con un’immagine per il loading:

<div id="loading" style="display:none;"><img src="img/loading.gif" /></div>

Questo div inizialmente non verrà mostrato.

Al momento della chiamata ajax mostriamo il div con l’immagine e quando la chiamata ajax è terminata nascondiamo il div.
Per fare questo ci serviamo dei metod ajaxStart e ajaxComplete, entrambi appartenenti alla libreria jQuery.

$(document).ajaxStart(function () {
   $("#loading").show();
});

$(document).ajaxComplete(function(){
   $("#loading").hide();
});

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *