Bagaimana untuk Menetapkan Masa Tamat untuk Pemuatan Imej Asynchronous dengan jQuery?

Pemuatan Imej Asynchronous dengan jQuery

Adalah penting untuk memuatkan imej secara tidak segerak untuk mengelak daripada menyekat pemaparan halaman dan memastikan pengalaman pengguna yang lancar. Walaupun $.ajax() ialah alat yang berharga untuk operasi tak segerak, ia tidak direka secara eksplisit untuk memuatkan imej.

Menggunakan Kaedah .load jQuery

jQuery menyediakan . kaedah load() yang boleh memuatkan kandungan luaran, termasuk imej. Walau bagaimanapun, menetapkan tamat masa untuk memuatkan imej tidak mudah menggunakan .load().

Alternatif Menggunakan Elemen Imej Asli

Pendekatan alternatif ialah mencipta elemen imej baharu secara langsung dan tetapkan atribut sumbernya. Ini membolehkan lebih fleksibiliti dalam mengendalikan pemuatan imej.

Menetapkan Tamat Masa

Untuk menetapkan tamat masa untuk memuatkan imej tak segerak, ikut langkah berikut:

1. Buat imej elemen:

   var img = $("<img />");

2. Tetapkan atribut sumber:

   img.attr('src', 'http://somedomain.com/image.jpg');

3. Pegangan beban acara:

   img.on('load', function() {
       // Checks if the image has loaded successfully
       if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
           // Image failed to load
           alert('broken image!');
       } else {
           // Image loaded successfully
           $("#something").append(img);
       }
   });

Apabila imej berjaya dimuatkan, anda boleh menambahkannya ke lokasi yang dikehendaki dalam HTML anda. Jika imej gagal dimuatkan (cth., 404), anda boleh menangani ralat seperti yang anda rasa sesuai.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Masa Tamat untuk Pemuatan Imej Asynchronous dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!