Keasinkronan Memuat Imej dalam JavaScript

Imej yang dicipta secara dinamik melalui JavaScript juga dimuat secara asinkron. Mari kita pertimbangkan kod berikut sebagai contoh:

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

Seperti yang anda lihat, di sini kita mencipta tag img, mengisi src-nya dengan laluan ke imej dan meletakkan imej ini dalam body. Walau bagaimanapun, imej tidak akan muncul di halaman serta-merta. Masalahnya ialah apabila kita mengisi src dengan laluan ke imej - penyemak imbas mula memuat turun imej tersebut dari tapak web. Hanya setelah imej selesai dimuat turun, barulah penyemak imbas dapat menunjukkannya.

Jika imej agak besar, dan kelajuan internet agak perlahan, maka pengguna tapak web untuk seketika akan dapat "mengagumi" imej kosong - sehingga ia selesai dimuat.

Sebenarnya, tag img mempunyai peristiwa load, yang dicetuskan apabila pemuatan imej selesai:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// akan dicetuskan apabila imej selesai dimuat
});

Kita boleh menggunakan ini untuk meletakkan imej pada halaman hanya apabila imej tersebut telah dimuat:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // letakkan setelah dimuat
});

Imej tidak semestinya berjaya dimuat: mungkin laluan ke imej tidak betul, atau terdapat gangguan internet, kerosakan pelayan tapak web atau sesuatu yang serupa. Dengan kata lain - situasi pengecualian. Dalam kes ini, bukan peristiwa load yang akan dicetuskan, tetapi peristiwa error:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// ralat memuat imej
});

Buatkan butang, yang apabila ditekan akan memuatkan imej. Tunjukkan imej tersebut apabila ia selesai dimuat. Papar mesej sekiranya terdapat masalah dengan pemuatan imej.