Comment afficher un indicateur de chargement lors de requêtes AJAX asynchrones ?

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

Pour indiquer la progression des requêtes asynchrones, une image de chargement peut être affichée. Pendant l'exécution de la requête, l'image restera visible et disparaîtra une fois terminée.

Utilisation de la méthode de masquage/affichage pré-demande et post-demande

Une méthode simple L'approche consiste à contrôler manuellement la visibilité de l'image :

$('#loading-image').show();

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

Utilisation des événements Ajax globaux

Vous pouvez également utiliser des événements Ajax globaux pour gérer la visibilité de l'image :

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

Cette méthode garantit que l'image de chargement est affichée uniformément pour toutes les requêtes asynchrones.

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!