Comment puis-je afficher une image de chargement lors de requêtes AJAX asynchrones ?

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 code 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 manière, 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 requête asynchrone en cours, améliorant ainsi l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!