JavaScript'te Görüntülerin Asenkron Yüklenmesi

JavaScript aracılığıyla dinamik olarak oluşturulan görüntüler de asenkron olarak yüklenir. Örnek olarak aşağıdaki kodu inceleyelim:

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

Gördüğünüz gibi, burada bir img etiketi oluşturuyoruz, src özelliğine görüntünün yolunu yazıyoruz ve bu görüntüyü body içine yerleştiriyoruz. Ancak görüntü sayfada hemen görünmeyecektir. Sebebi şu: src özelliğine görüntünün yolunu yazdığımızda - tarayıcı bu görüntüyü siteden indirmeye başlar. Görüntü indirildiği anda, ancak o zaman tarayıcı onu gösterebilecektir.

Eğer görüntü yeterince büyükse ve internet hızı yeterince düşükse, o zaman site kullanıcısı görüntü yüklenene kadar bir süre boş bir görüntüyü "seyretmek" zorunda kalabilir.

Aslında img etiketinin, görüntünün yüklenmesi bittiğinde tetiklenen load (yükleme) olayı mevcuttur:

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

image.addEventListener('load', function() {
	// görüntü yüklendiğinde çalışır
});

Bunu, görüntüyü sayfaya ancak o görüntü yüklendiğinde yerleştirmek için kullanabiliriz:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // yüklendikten sonra yerleştiriyoruz
});

Görüntü mutlaka yüklenmeyebilir: görüntünün yolu yanlış olabilir, internet bağlantısı kopabilir, site sunucusunda arıza olabilir veya benzeri bir şey yaşanabilir. Başka bir deyişle - istisnai bir durum. Bu durumda load olayı değil, error (hata) olayı tetiklenecektir:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// görüntü yükleme hatası
});

Tıkladığında bir görüntü yükleyen bir düğme yapın. Görüntü yüklendiğinde görüntüyü gösterin. Görüntü yüklemede sorun olması durumunda bir mesaj gösterin.