Bagaimanakah Saya Boleh Melaksanakan Panggilan Balik untuk Mengendalikan Peristiwa Pemuatan Imej dalam JavaScript?

Laksanakan Panggilan Balik untuk Acara Pemuatan Imej

Apabila bekerja dengan imej dalam aplikasi web, mengetahui apabila ia telah selesai dimuatkan menjadi penting untuk fungsi tertentu. Cara yang cekap untuk mencapai ini adalah melalui penggunaan panggilan balik. Dalam artikel ini, kami akan meneroka cara menjalankan panggilan balik JavaScript sebaik sahaja imej selesai dimuatkan.

Menggunakan .lengkap dengan Panggilan Balik

Untuk mematuhi piawaian kaedah tanpa kebergantungan tambahan, anda boleh menggunakan sifat .complete bersama-sama dengan fungsi panggil balik. Teknik ini memastikan anda tidak menunggu lebih lama daripada yang diperlukan untuk imej dimuatkan:

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

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

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

Coretan kod ini terlebih dahulu menyemak sama ada imej telah dimuatkan dengan memeriksa sifat .completenya. Jika ia benar, panggilan balik loaded() akan digunakan serta-merta. Jika ia palsu, pendengar acara dilampirkan pada acara beban dan ralat untuk mengendalikan panggilan balik dan pengendalian ralat, masing-masing.

Kaedah ini boleh dipercayai dan memastikan panggilan balik dilaksanakan sebaik sahaja imej dimuatkan sepenuhnya, meminimumkan masa menunggu yang tidak perlu.

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