Icona Loading attesa caricamento di una pagina ajax

Pubblicato lun 10 feb 2014 by
Icona Loading attesa caricamento di una pagina ajax

Le immagini di caricamento servono per mettere in attesa l'utente che clicca o esegue una richiesta, la particolarità di ajax è quella di poter caricare elementi di una pagina esterna o effettuare delle query al database server tramite script esterni, se è vero che se si tratta di operazioni minime la risposta è praticamente "istantanea", per le operazioni che richiesono qualche millisecondo di più, può portare l'utente ad effettuare svariati click pensando di aver sbagliato a cliccare, da qui nasce la necessità di non lasciare delle perplessità dopo un click di aver effettuato la procedura correttamente.

Prima di tutto dovete procurarvi un'immagine di loading che sia di vostro gradimento e in linea con la grafica della vostra applicazione, è sufficiente cercare loading.gif da google immagini per trovare una miriade di animazioni già pronte, clicca qui per vederne quacuna.

Ora che avete procurato la vostra gif dovete inserire la gif prima del contenuto da ricaricare, vi mostro un esempio di file html che ho creato io per la demo di questo esempio:

<h1>Pagina demo caricamento script ajax</h1>
<p>Clicca sul pulsante seguente per visualizzare la demo</p>
<!-- Pulsante per ricaricare il contenuto -->
<button class="aggiorna">Clicca!</button>
<div>
<!-- Immagine di loading -->
	<img src="image/caricamento.gif" alt="loader" id="loader">
<!-- Div contenente la porzione di html da ricaricare -->
	<div id="contenuto">
		<p>Contenuto prima del caricamento</p>
	</div>
</div>
<!-- per velocizzare il caricamento della pagina ho richiamato dopo sia jquery che il file javascript contenente la chiamata ajax -->
<script src="js/jquery.js"></script>
<script src="js/loadingajax.js"></script>

Ora bisogna nascondere la gif perchè dovrà apparire solo durante il caricamento, io ho optato di nasconderla dal css perchè se nel browser dell'utente fosse disabilitato javascript oltre a non funzionare ajax resterebbe sempre in bella mostra l'icona di caricamento, comunque ecco il file loadingajax.css

#loader {
	display: none;
	height: 24px;
}

Con la proprietà display: none abbiamo nascosto l'immagine e con height: 24px ho impostato l'altezza a 24 pixel onde evitare di avere un'immagine troppo grossa o troppo piccola.

Ora si andrà a scrivere lo script vero e proprio che farà apparire l'icona di aricamento e la farà sparire a caricamento completato:

$( document ).ready(function() {
	$( ".aggiorna" ).click(function() {
		$('#loader').show();
		$('#contenuto').hide();	
		$('#contenuto').load('file da caricare', function() {			
				$('#loader').delay(2000).fadeOut('fast');
				$('#contenuto').delay(2300).fadeIn('fast');
			});		
		return false;
});	
});

Vediamo riga per riga il codice che vi ho mostrato:

$( ".aggiorna" ).click(function() {

Al click del pulante con classe aggiorna esegue il codice che segue

$('#loader').show();
$('#contenuto').hide();	

Mostro la gif con id loader e nascondo il contenuto del div contenuto

$('#contenuto').load('file da caricare', function() {	

Do il comando ajax tramite la funzione load() caricando la nostra pagina o script e la carica dentro il div  con id contenuto

$('#loader').delay(2000).fadeOut('fast');
$('#contenuto').delay(2300).fadeIn('fast');

Ora posso nascondere la gif e mostrare il contenuto caricato dal file esterno.

Notare la funzione delay() in quanto la pagina che sono andato a caricare è veramente misera essendo solo di 1 riga di poche lettere, in questo modo ho impostato un ritardo nell'animazione di 2 secondi (2000) così da poter apprezzare il susseguirsi delle animazioni.

Vi lascio il link alla demo che ho preparato così da poter vedere il risultato finale.

 Prova la demo

comments powered by Disqus