Lazy Load (Tembel Yükleme)

HTML – Lazy Load (Tembel Yükleme)
HTML – Lazy Load (Tembel Yükleme)
Oldukça popüler olan Lazy Load özelliğini Html ile birlikte sayfa yüklendikten sonra resimlerin yüklenmesinin nasıl yapıldığından bahsettim. Bu işlemin Html ile nasıl yapıldığını merak ediyorsanız yazımı okuyabilirsiniz.

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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
PHP ile Form Mail Gönderimi
Devamını Oku

Form Mail Gönderimi

Bu yazımda Html ile oluşturduğumuz formun Php ile istediğimiz mail adresine gönderimini bir örnek ile sağladım. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku

Ülke Telefon Kodu Listeleme
Devamını Oku

Ülke Telefon Kodu Listeleme

Telefon numarası alanına ülkelerin telefon kodlarını listeleyip seçilen ülkenin telefon kodunu otomatik ekleten bir Javascript eklentisinden bahsettim. Yazımın devamını okuyup detaylı inceleyebilirsiniz.

Devamını Oku