Merhabalar,

Bu yazımda resim dosyalarını HTML’in Lazy Load özelliğiyle, sayfa ilk yüklendikten sonra nasıl yüklenebileceğinden bahsedeceğim. Lazy Load’un temel amacı, sayfanın ilk açılış hızını artırmaktır.

HTML5 ile gelen loading niteliğini <img> etiketine ekleyerek modern tarayıcılarda bu işlemi tek satırda gerçekleştirebiliriz:

<img src="gorsel.png" loading="lazy">

Görüntünün gerçekten sayfa yüklendikten sonra çağrıldığını test etmek için onload niteliğini kullanabilirsiniz:

<img
  src="gorsel.png"
  loading="lazy"
  onload="alert('Görsel şimdi yüklendi!');">

loading niteliğinin alabileceği değerler:

• auto – Varsayılan davranış (tarayıcı karar verir).
• lazy – Görsel, scroll ile görünür hâle geldiğinde yüklenir.
• eager – Görsel, sayfa yüklenir yüklenmez indirilir.

Tek bir nitelik ile lazy load uygulamak oldukça kolay ve sayfa performansını iyileştirir.

Mutlu Kodlamalar :)