Bagaimanakah saya boleh memaparkan imej pemuatan semasa permintaan AJAX menggunakan jQuery?

Memaparkan Imej Memuatkan Semasa Pelaksanaan Ajax

Untuk menunjukkan pelaksanaan permintaan tak segerak, memaparkan imej yang memuatkan selalunya dikehendaki. Mari kita terokai cara untuk mencapai ini menggunakan kaedah $.ajax jQuery.

Memperkenalkan Imej

Tingkah laku yang diingini melibatkan paparan imej untuk menunjukkan permintaan yang sedang berjalan. Berikut ialah persediaan HTML yang mudah:

<img>

Penyesuaian Permintaan AJAX

Untuk menambah permintaan $.ajax dengan visualisasi yang diingini, kami mesti menyertakan perkara berikut:

• Tunjukkan Imej Memuatkan Sebelum Permintaan: Gunakan kaedah fadeIn() atau show() untuk menjadikan imej pemuatan kelihatan.
• Sembunyikan Imej Pemuatan Selepas Selesai: Gunakan kaedah fadeOut() atau hide() untuk mengalih keluar imej pemuatan selepas permintaan selesai.

AJAX tersuai Permintaan:

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

Pendekatan Berasaskan Peristiwa

Pendekatan alternatif menggunakan acara jQuery ajaxStart dan ajaxStop global. Ini membenarkan visualisasi tak segerak untuk semua acara AJAX:

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

Dengan melaksanakan teknik ini, pembangun boleh memaparkan imej pemuatan dengan berkesan untuk memberikan maklum balas visual semasa permintaan tak segerak.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan imej pemuatan semasa permintaan AJAX menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!