Bagaimanakah Saya Boleh Memaparkan Imej Memuatkan Semasa Permintaan AJAX Asynchronous?

Memaparkan Memuatkan Imej semasa Permintaan Asynchronous

Melakukan permintaan tak segerak menggunakan $.ajax boleh menyebabkan kekeliruan kerana kekurangan petunjuk yang dapat dilihat proses yang berterusan. Artikel ini meneroka teknik untuk menunjukkan imej pemuatan semasa permintaan sedemikian.

Sebagai permulaan, coretan kod yang disediakan melakukan permintaan tak segerak pada URL dan menambahkan HTML yang diterima pada elemen dengan 'maklumat' kelas. Untuk memaparkan imej pemuatan, elemen imej dengan 'id' 'memuat-imej' boleh digunakan.

Salah satu pendekatan adalah untuk menunjukkan imej sebelum membuat permintaan dan menyembunyikannya selepas selesai:

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

Pendekatan yang lebih umum ialah mengikat imej pemuatan ke acara ajaxStart dan ajaxStop global. Dengan cara ini, imej akan kelihatan untuk semua permintaan tak segerak:

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

Teknik ini memberikan petunjuk mesra pengguna tentang permintaan tak segerak yang berterusan, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Imej Memuatkan Semasa Permintaan AJAX Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!