Comment ajouter une image de chargement en cours (spinner) en jQuery ?
Les traitements AJAX peuvent être longs, et peuvent nécessité d'afficher un message de chargement.
Le langage JavaScript permet à l'internaute d'interagir directement avec la page HTML. Lors d'un évènement, il est possible de lancer une requête AJAX vers le serveur pour récupérer et traiter des informations. Ces traitements AJAX peuvent être longs et il est alors nécessaire d'afficher un message ou une image indiquant le chargement de la zone. La bibliothèque jQuery permet de gérer facilement ce problème. Exemple de message de chargement :
<div id=chargement> Chargement en cours... </div>
Pour afficher la division, on utilise deux évènements JavaScript. L'évènement AjaxStart se déclenche au démarrage du traitement AJAX tandis que l'évènement AjaxStop est appelé à la fin du traitement. Pour masquer la division, la méthode hide() ajoute la propriété CSS (display) et lui attribue la valeur none, ce qui cache l'élément. La méthode show() supprime la propriété CSS pour afficher l'élément :
jQuery('#chargement')
.hide() // cache la division au départ
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
Un autre moyen consiste à utiliser la méthode ajaxSetup(). Elle permet de configurer les futurs appels AJAX qui se dérouleront pendant le traitement de la page. L'évènement BeforeSend est déclenché avant le début du traitement AJAX et l'évènement Complete se déclenche quand l'appel AJAX se termine :
jQuery.ajaxSetup({
beforeSend: function() {
$('#chargement').show();
},
complete: function(){
$('#chargement').hide();
},
});