Loading lazy
loading="lazy" ile görselleri tembel yüklemeyi öğrenirsin.
loading="lazy" ne işe yarar?
Bir sayfa açıldığında tarayıcı, görselleri indirmeye hemen başlar. Oysa ekranın altında kalan görselleri kullanıcı henüz göremez. <img> etiketine loading="lazy" özniteliğini eklersen tarayıcı, görseli yalnızca kullanıcı yaklaşınca indirir.
Bu yöntem tembel yükleme (lazy loading) olarak bilinir. İlk sayfa çizimini hızlandırır ve veri tüketimini azaltır. Çok görselli galerilerde ve uzun yazılarda en çok farkı burada hissedersin.
Ne zaman kullanmalısın?
Tembel yükleme her görsel için uygun değildir. Ekranın üstünde ilk açılışta görünen görsellere lazy ekleme; tarayıcı bunları zaten hemen yükler, aksine gecikme yaratabilir.
Buna karşılık uzun galerilerde, blog yazısındaki görsellerde ve alt kısma yakın içeriklerde lazy mükemmel çalışır. <img loading="lazy"> yazman yeterli; ek bir betik gerekmez.
Uygulama Galeriyi tembel yükle
Body içinde iki <figure> var; her birinin içinde bir <img> ve bir <figcaption> bulunuyor. Her iki <img> etiketine loading="lazy" özniteliğini ekle.
Örnek çözümü göster
<body>
<figure>
<img src="/gorseller/kedi.jpg" alt="Sokak kedisi" loading="lazy">
<figcaption>Sokak kedisi</figcaption>
</figure>
<figure>
<img src="/gorseller/kopek.jpg" alt="Park köpeği" loading="lazy">
<figcaption>Park köpeği</figcaption>
</figure>
</body>Kendini test et
-
loading="lazy" özniteliği ne yapar?
- Görseli sayfa açılışında yükler
- Görseli yalnızca kullanıcı yaklaşınca yükler
- Görseli hiç yükletmez
- Görseli yeniden boyutlandırır
Cevabı göster
Görseli yalnızca kullanıcı yaklaşınca yükler — Doğru. lazy, görseli yalnızca kullanıcı yaklaşınca indirir.
-
img'e loading ekle
<img src="/gorseller/orman.jpg" alt="Orman" ____>Cevabı göster
<img src="/gorseller/orman.jpg" alt="Orman" loading="lazy"> -
loading değerini anlamıyla eşleştir
- loading="lazy"
- Tembel yükler
- loading="eager"
- Hemen yükler
- loading="auto"
- Tarayıcıya bırakır