Gif animé de chargement AJAX avec jQuery
Lorsqu'on utilise de l'AJAX sur une page web, on affiche généralement un petit gif animé lors du chargement de la requête, pour que l'utilisateur comprenne qu'un traitement est en cours et qu'il faut attendre la réponse du serveur pour que les données s'affichent.
C'est très simple à faire, il suffit d'afficher le gif animé dans la page web juste avant d'envoyer la requête AJAX, et de le masquer dans le callback qui traite le retour AJAX (puisque lorsque le callback est appelé, le serveur a répondu à la requête XHR et le chargement est terminé).
Voici comment faire en jQuery, avec le code HTML de la page, puis le code Javascript :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery loading</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <button id="ajax-load">Load</button> <img id="ajax-loading" src="http://www.ajaxload.info/images/exemples/5.gif" alt="Loading" /> </body> </html>
jQuery(function($){
$('#ajax-loading').hide(); // On masque le gif au chargement de la page
$('#ajax-load').click(function(e){
// Affichage du gif de chargement et envoi requête AJAX
$('#ajax-loading').show();
$.get(
'http://api.geonames.org/citiesJSON',
{north: 44.1, south: -9.9, east: -22.4, west: 55.2, lang: 'de', username: 'demo'},
function(data){
$('#ajax-loading').hide(); // On masque le gif de chargement quand le serveur a répondu
}
);
});
});
Cette page peut vous intéresser : export excel vers google documents à lire tout de suite !
On trouve pleins de sites sur internet qui proposent des gif animé pour faire une jauge de chargement AJAX :
- http://www.ajaxload.info/
- http://preloaders.net/
- http://cssload.net/
- http://fgnass.github.com/spin.js/
- http://heartcode.robertpataki.com/canvasloader/
- http://neteye.github.com/activity-indicator.html
- http://www.chimply.com/Generator
- http://loadinggif.com/
Fini de lire cette page ? allez faire un tour ici : transformer un visage en avatar (na'vi), ça peut vous intéresser.
