Wie kann ich bei asynchronen AJAX-Anfragen ein Ladebild anzeigen?

Anzeige des geladenen Bildes während asynchroner Anfragen

Das Ausführen asynchroner Anfragen mit $.ajax kann zu Verwirrung führen, da keine sichtbaren Hinweise darauf vorhanden sind fortlaufender Prozess. In diesem Artikel werden Techniken untersucht, um bei solchen Anfragen ein Ladebild anzuzeigen.

Zunächst führt das bereitgestellte Code-Snippet eine asynchrone Anfrage an eine URL aus und hängt den empfangenen HTML-Code an ein Element mit der Klasse „info“ an. Um ein Ladebild anzuzeigen, kann ein Bildelement mit der „ID“ „loading-image“ verwendet werden.

Ein Ansatz besteht darin, das Bild vor der Anfrage anzuzeigen und nach Abschluss auszublenden:

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

Ein allgemeinerer Ansatz besteht darin, das Ladebild an die globalen Ereignisse ajaxStart und ajaxStop zu binden. Auf diese Weise ist das Bild für alle asynchronen Anfragen sichtbar:

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

Diese Techniken bieten einen benutzerfreundlichen Hinweis auf die laufende asynchrone Anfrage und verbessern so das Benutzererlebnis.

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