Intersection Observer API ile Lazy Loading

Selamlar. Bu yazıda Intersection Observer API ile Lazy Loading hakkında size bilgi sunacağım. Aslında bu iş için hazırda kütüphaneler de var. Olay şöyle ki bir projede görseller tek seferde 90-100 tane kadar yükleniyordu. Sayfanın en altında kalan ve benim henüz görmediğim görsel bile anında yükleniyordu. Bunun için IntersectionObserver API kullandım. İşimi de gördü.

Intersection Observer API ile Lazy Loading

Aşağıdaki gibi bir örneğe sahiptim.

<div class="article">
 <p>Lorem ipsum burada olsun uzunca</p>
</div>
<div class="container">
    <img data-src="https://via.placeholder.com/350x350" alt="">
</div>

<div class="container">
    <img data-src="https://via.placeholder.com/450x450" alt="">
</div>

<div class="container">
    <img data-src="https://via.placeholder.com/550x550" alt="">
</div>

Yukarıdaki kodlarda sizin görselleriniz olsun. Diyelim ki 30 tane görseliniz var. Benim gibi 90-100 değil. O zaman her birisi 100 kb olsa 3 mb yapar. Kısacası hoş bir durum değil bu. Bunu çözmek için Lazy Loading kütüphaneleri var elbette. Neyse yukarıdaki yapıdan yola çıkarak önce containerları yakalatayım.

const container = document.querySelectorAll(".container")

Ardından da bunları forEach ile döndürelim yapısı şöyle olsun;

container.forEach(f => { 
  // f burada dolaşılan eleman
})

Son olaraksa IntersectionObserver API ile sistem şöyle olacak;

container.forEach(f => {
    let observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const { isIntersecting } = entry
            
            if(isIntersecting) {
                f.children[0].src = f.children[0].dataset.src
                observer = observer.disconnect()
            }
        }, {
            root: f
        })
    })

    observer.observe(f)
})

IntersectionObserver ilk arguman olarak entries alır. Siz oraya her şeyi diyebilirsiniz çok sorun da değil aslında. Sonra bu entryleri dolaşmak için forEach ile dönersiniz.

inIntersection ile target element yani hedef elemanla kesişme sağlanıp sağlanmadığını kontrol ediyoruz. Benim örneğimde altta sadece bir adet child olabilirdi onun dataset’i üzerinden ona manipülasyon uyguladım. Eğer kesişme sağlanıyorsa içeride uygulama mantığını işlemeniz gerekiyor. Benim örneğimde mevcut elemanın altındaki ilk child elemanı alıp onun dataset’inde yer alan src’nin değerini alıyorum.

Daha sonra aynı elemanın src attribute’una atiyorum. Son olarak observer elemanını burada disconnect etmezsem her tekrar kesişimde o url’i çağıracak. Bunun yerine zaten yüklenmişse bir daha çağırmanın ne mantığı var diyerek disconnect ediyoruz.

Diğer argüman ise object olarak gelir. Bu da root isimli bir key alır. Burada bahsedilen root görünür olduğu anda işlem yapacağınız eleman aslında. Başka keyler de var bunu dokümanı okurayak görebilirsiniz.

Son olarak observer.observe(f) diyerek dolaştığımız elemanın görünürlük durumunu kontrol etmeye başlıyoruz. Bu fonksiyon observer değişkeni disconnect olana kadar çalışır, disconnect olduktan sonra ilgili eleman için tekrar çalışmaz.

Bu yazıda Intersection Observer API ile Lazy Loading işlemini gördük. Örnek görsel üzerindendi. Ancak siz bunu devamını oku mantığını oluşturmak için de kullanabilirsiniz. Bu o kadar da zor değil. Tabii orada application logic daha farklı olmak zorundadır muhtemelen. Aşağıdaki CodePen örneğini developer tools’un network sekmesine giderek çalıştırın. Tüm önceki requestleri temizleyin tabii. Sonra scroll yapın en aşağıya kadar ve anlatmak istediğimi göreceksiniz.

https://codepen.io/aligoren/pen/ebKeyx

Umarım faydalı olmuştur. İşinize yararsa ne mutlu. İyi çalışmalar dilerim.