Asinkronitas Pemuatan Gambar di JavaScript

Gambar yang dibuat secara dinamis melalui JavaScript juga dimuat secara asinkron. Mari kita perhatikan kode berikut sebagai contoh:

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

Seperti yang Anda lihat, di sini kita membuat tag img, menuliskan path ke gambar ke dalam src-nya dan menempatkan gambar ini di dalam body. Gambar, bagaimanapun, tidak akan langsung muncul di halaman. Masalahnya adalah ketika kita menuliskan path ke gambar ke dalam src - browser mulai mengunduh gambar tersebut dari situs. Hanya setelah gambar selesai diunduh, barulah browser dapat menampilkannya.

Jika gambar cukup besar, dan kecepatan internet cukup kecil, maka pengguna situs untuk beberapa waktu dapat "menikmati" gambar kosong - sampai gambar tersebut selesai dimuat.

Sebenarnya, tag img memiliki event load, yang terpicu saat pemuatan gambar selesai:

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

image.addEventListener('load', function() {
  // akan terpicu saat gambar selesai dimuat
});

Kita dapat menggunakan ini untuk menempatkan gambar di halaman, hanya ketika gambar tersebut telah selesai dimuat:

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

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

Gambar tidak selalu berhasil dimuat: mungkin path ke gambar tidak benar, atau terjadi putus koneksi internet, kerusakan server situs, atau sesuatu yang serupa. Dengan kata lain - situasi pengecualian. Dalam hal ini, yang akan terpicu bukan event load, tetapi event error:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // kesalahan pemuatan gambar
});