Wie kann ich während einer AJAX-Anfrage mit jQuery ein Ladebild anzeigen?

Anzeige des Ladebilds während der Ajax-Ausführung

Um die asynchrone Anforderungsausführung anzuzeigen, ist häufig die Anzeige eines Ladebilds erwünscht. Lassen Sie uns untersuchen, wie Sie dies mit der $.ajax-Methode von jQuery erreichen können.

Einführung eines Bildes

Das gewünschte Verhalten beinhaltet die Anzeige eines Bildes, um die laufende Anfrage anzuzeigen. Hier ist ein einfaches HTML-Setup:

<img>

Anpassung der AJAX-Anfrage

Um die $.ajax-Anfrage mit der gewünschten Visualisierung zu erweitern, müssen wir Folgendes einschließen:

• Ladebild vor der Anfrage anzeigen: Verwenden Sie dazu die Methode fadeIn() oder show() Machen Sie das Ladebild sichtbar.
• Ladebild nach Abschluss ausblenden: Verwenden Sie die Methode fadeOut() oder hide(), um das Ladebild nach Abschluss der Anfrage zu entfernen.

Maßgeschneiderte AJAX-Anfrage:

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

Ereignisbasiert Ansatz

Ein alternativer Ansatz nutzt die globalen jQuery-Ereignisse ajaxStart und ajaxStop. Dies ermöglicht eine asynchrone Visualisierung für alle AJAX-Ereignisse:

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

Durch die Implementierung dieser Techniken können Entwickler effektiv ein Ladebild anzeigen, um bei asynchronen Anfragen visuelles Feedback zu geben.

Das obige ist der detaillierte Inhalt vonWie kann ich während einer AJAX-Anfrage mit jQuery ein Ladebild anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!