Heim >Web-Frontend >CSS-Tutorial >Wie kann ich bei jQuery-AJAX-Anfragen einen Ladeindikator anzeigen?

Wie kann ich bei jQuery-AJAX-Anfragen einen Ladeindikator anzeigen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-18 01:42:01947Durchsuche

How Can I Show a Loading Indicator During jQuery AJAX Requests?

Ladeanzeige während $.ajax-Anfragen anzeigen

Frage:

Wie kann ich während einer asynchronen Ausführung eine visuelle Anzeige anzeigen? HTTP-Anfrage wird mit gestellt $.ajax?

Antwort:

Um anzuzeigen, dass eine asynchrone Anfrage verarbeitet wird, können Sie das Laden von Bildern verwenden. Hier sind zwei Methoden dafür:

Methode 1: Inline-Anzeigesteuerung

Ladebild vor der Anfrage anzeigen und nach Abschluss der Anfrage ausblenden:

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

Methode 2: Globale Ereignisbindung

Binden Sie die Ladebildanzeige zu globalen ajaxStart- und ajaxStop-Ereignissen. Dieser Ansatz schaltet das Bild für alle Ajax-Anfragen um:

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn