Bagaimanakah Saya Boleh Melaksanakan Fungsi Panggilan Balik Selepas Imej Dimuatkan dalam JavaScript?

Cara Alternatif untuk Mengendalikan Pemuatan Imej dengan Panggilan Balik

Apabila memuatkan imej, mengetahui apabila ia telah selesai boleh menjadi penting untuk melaksanakan fungsi tertentu . Soalan ini meneroka pilihan untuk melaksanakan panggilan balik semasa memuatkan imej dalam JavaScript.

Penyelesaian 1: .complete Callback

Pendekatan yang boleh dipercayai dan mematuhi piawaian melibatkan penggunaan .complete harta bersama dengan fungsi panggil balik. .complete menyemak sama ada imej telah pun selesai dimuatkan, memastikan panggilan balik dicetuskan serta-merta jika berkenaan.

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
      alert('error');
  });
}

Kod ini:

1. Memulakan elemen imej dengan img.
2. Mentakrifkan fungsi panggil balik yang dimuatkan untuk mengendalikan imej muatkan.
3. Menyemak sama ada imej sudah lengkap menggunakan .complete.
4. Jika selesai, panggil panggilan balik dengan segera.
5. Jika tidak lengkap, lampirkan pendengar acara untuk kedua-dua 'load ' (untuk melaksanakan panggilan balik semasa beban) dan 'ralat' (untuk memberitahu gagal memuatkan).

Nota Tambahan

Pendekatan ini sangat cekap kerana ia mencetuskan panggilan balik sebaik sahaja imej sedia, mengelakkan kelewatan yang tidak perlu disebabkan oleh peristiwa pendengar menunggu. Ia juga disokong oleh penyemak imbas utama dan membolehkan pengendalian ralat mudah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Fungsi Panggilan Balik Selepas Imej Dimuatkan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!