Gorselleri ihtiyac duyuldugunda yukleme
Lazy Loading sistemi kurduk. Normalde sayfa acilirken tum gorseller yuklenir. Lazy loading ile sadece gorunen gorseller yuklenir.
Bir playlist sayfasinda 50 sarki kapagi var. Kullanici sadece ilk 6'sini goruyor. Neden 50'sini birden yukleyelim? Scroll edince gerisi yuklenir.
Sonuc: Sayfa %70 daha hizli aciliyor. Mobil kullanicilar icin veri tasarrufu.
Tarayicinin yerlesik ozelligini kullaniyoruz. Gorsel ekrana yaklasinca otomatik tespit edip yukleme basliyor.
Ayarlar > Performans > Lazy Loading
Ayarlar > Gorseller > Placeholder
Ne kadar once yukleme baslayacak
Dashboard > Gorseller > Analiz
Sayfa yüklendiğinde görseller için Intersection Observer API devreye girer. Viewport'a yaklaşan görseller otomatik olarak tespit edilir ve yüklenir.
<img loading="lazy"> veya data-src attribute'u ile görsel yolu tutulur, src boş bırakılır.
IntersectionObserver oluşturulur. rootMargin: '200px' ile ekranın 200px altındaki görseller de izlenir.
entry.isIntersecting true olduğunda callback tetiklenir. Görsel viewport'a girdi demektir.
img.src = img.dataset.src ile gerçek URL atanır. Tarayıcı HTTP GET isteği gönderir.
onload event'i tetiklenince placeholder (blur/skeleton) kaldırılır, gerçek görsel gösterilir.
Görsel yüklendikten sonra observer.unobserve(img) çağrılır. Gereksiz izleme engellenir.
Tembel yükleme. İçeriği gerektiğinde yükleme tekniği.
Kullanıcının ekranda gördüğü alan.
Görsel yüklenene kadar gösterilen geçici içerik.
Elemanların görünür olup olmadığını izleyen API.