Merhabalar,
Bu yazımda resim dosyalarını Html Lazy Load özelliğiyle birlikte sayfa yüklendikten sonra yüklenmesinin nasıl yapıldığından bahsedeceğim. Lazy Load oldukça popüler bir özelliktir ve Html dışında farklı yöntemlerle oldukça sık kullanılmaktadır.
Temel Amacı web sayfasının ilk yüklenme hızını arttırmaktır. Lazy (Tembel) olarak belirttiğimiz resim dosyası sayfa yüklendikten sonra yüklenecektir ilk yüklemeye dahil olmadığından dosya boyutu yüksek görsellerde kullandığınızda sayfanın açılış hızını arttırır.
Dediğim gibi bazı javascript pluginleri ile de bu işlemi yapabilirsiniz fakat ben Html ile img etiketine bir attribute (nitelik) ekleyerek güncel tarayıcılarda çalışan nitelikten bahsedeceğim.
Nasıl yapıyoruz hemen göz atalım;
<img src="gorsel.png" loading="lazy"> Gördüğünüz gibi oldukça basit bir attribute ekleyerek bu işlemi halledebiliyoruz. loading=”lazy” ile bu dosyayı sayfa yüklendikten sonra çağırıyoruz bu sayede sayfanın ilk açılış hızı bir nebze olsun hızlanıyor. Ne zaman yüklendiğini anlamak ve test etmek için javascript onload niteliğiyle test edebilirsiniz.
<img src="gorsel.png" loading="lazy" onload="alert('Görsel Şimdi Yüklendi!');"> Gerçekten uzun süredir kullanılan ve oldukça işe yarayan bu özelliği Html5 ile tek bir nitelik kullanarak yapabilmemiz oldukça güzel bir şey.
Merak edenler için loading niteliğinin değerlerini aşağıda listeledim;
- auto: Varsayılan değerdir. Varsayılan şekilde dosyayı yükler herhangi bir özelliği bulunmamaktadır.
- lazy: Scroll (Kaydırma) konumuna göre görünür hale getirir ve görüntüyü yükler. Bu makalenin konusudur.
- eager: Herhangi bir Scroll konumu farketmeksizin görseli hemen yükler.
Son olarak codepen üzerinden bir örnek paylaşıp makaleyi noktalayacağım.
See the Pen Html Lazy Load by furkangiray.com (@furkangiray_com) on CodePen.
Tek bir nitelik ile lazy load çalıştırmak oldukça kolay ve güzel oluyor. Umarım işinize yarar ve bir projenizde kullanırsınız.
Mutlu Kodlamalar 🙂
