Chiunque utilizza applicazioni made in Google è abituato a vedere “Caricamento in corso” o informazioni simili ogni qualvolta si muove all’interno della pagina.

Facciamo la stessa cosa con jQuery!:)

La prima cosa da fare è creare un DIV all’interno della nostra applicazione web che abbia un ID ben definito (nell’esempio l’ho chiamato “loading“) e nel foglio di stile andremo a dargli queste caratteristiche:


#loading{
position: fixed;
top: 0;
left: 0;
z-index: 5000;
background-color: red;
font-size: 150%;
color: white;
padding: 2px;
display:none;
}


Tramite la direttiva position: fixed e le coordinate di top e left ho posizionato il DIV nell’angolo in alto a sinistra dell’applicazione ed iniziamente non è visibile (display:none).

Adesso, tramite jQuery, facciamo in modo che ad ogni chiamata AJAX il DIV venga messo a video:


$(document).ready(function()
{
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
})

Non appena la richiesta AJAX termina il DIV viene di nuovo nascosto.

Buon javascript a tutti!:)