Wie kann ich bei asynchronen AJAX-Anfragen eine Ladeanzeige anzeigen?

Anzeige eines Ladeindikators während asynchroner AJAX-Anfragen

Im Bereich der Programmierung kommt es häufig vor, dass asynchrone Anfragen auftreten, wie beispielsweise die ausgeführte von $.ajax. Diese Anfragen rufen Daten im Hintergrund ab, sodass Benutzer weiterhin mit der Anwendung interagieren können, während die Anfrage verarbeitet wird. In bestimmten Szenarien ist es jedoch wünschenswert, Benutzern visuelles Feedback zu geben, das darauf hinweist, dass gerade eine asynchrone Anfrage ausgeführt wird.

Um dies zu erreichen, kann ein Bild angezeigt werden, das den aktiven Status der Anfrage anzeigt. Das folgende Code-Snippet bietet ein Beispiel für die Durchführung einer asynchronen Anfrage:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Um ein Ladebild während der Anfrage anzuzeigen, kann es vor der Anfrage angezeigt und nach Abschluss ausgeblendet werden:

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

Alternativ kann die allgemeinere Lösung verwendet werden, das Ladebild an die globalen Ereignisse ajaxStart und ajaxStop zu binden. Dieser Ansatz stellt sicher, dass das Ladebild für alle AJAX-Ereignisse angezeigt wird:

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

Das obige ist der detaillierte Inhalt vonWie kann ich bei asynchronen AJAX-Anfragen eine Ladeanzeige anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!