Anzeige des geladenen Bildes während asynchroner Anfragen

Das Ausführen asynchroner Anfragen mit $.ajax kann zu Verwirrung führen, da es keine sichtbaren Hinweise darauf gibt 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 wird 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.