Comment afficher une image de chargement lors d'une requête AJAX à l'aide de jQuery ?

Affichage de l'image de chargement pendant l'exécution Ajax

Pour indiquer l'exécution d'une requête asynchrone, l'affichage d'une image de chargement est souvent souhaité. Explorons comment y parvenir en utilisant la méthode $.ajax de jQuery.

Introduction d'une image

Le comportement souhaité implique l'affichage d'une image pour indiquer la requête en cours. Voici une configuration HTML simple :

<img>

Personnalisation de la requête AJAX

Pour augmenter la requête $.ajax avec la visualisation souhaitée, nous devons inclure les éléments suivants :

• Afficher l'image de chargement avant la requête : Utilisez la méthode fadeIn() ou show() pour rendre l'image de chargement visible.
• Masquer l'image de chargement une fois la requête terminée : Utilisez la méthode fadeOut() ou hide() pour supprimer l'image de chargement une fois la requête terminée.

Demande AJAX personnalisée :

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

Basée sur des événements Approche

Une approche alternative utilise les événements jQuery globaux ajaxStart et ajaxStop. Cela permet une visualisation asynchrone pour tous les événements AJAX :

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

En mettant en œuvre ces techniques, les développeurs peuvent afficher efficacement une image de chargement pour fournir un retour visuel lors des 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!