Affichage de l'image de chargement lors des requêtes asynchrones

L'exécution de requêtes asynchrones à l'aide de $.ajax peut prêter à confusion en raison du manque d'indication visible du processus en cours. Cet article explore les techniques permettant d'afficher une image de chargement lors de telles requêtes.

Pour commencer, l'extrait de code fourni effectue une requête asynchrone vers une URL et ajoute le HTML reçu à un élément avec la classe « info ». Pour afficher une image de chargement, un élément d'image avec un « id » de « loading-image » peut être utilisé.

Une approche consiste à afficher l'image avant de faire la demande et à la masquer une fois terminée :

$('#loading-image').show();
$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
  complete: function(){
    $('#loading-image').hide();
  }
});

Une approche plus générale consiste à lier l'image de chargement aux événements globaux ajaxStart et ajaxStop. De cette façon, l'image sera visible pour toutes les requêtes asynchrones :

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Ces techniques fournissent une indication conviviale de la demande asynchrone en cours, améliorant ainsi l'expérience utilisateur.