JS ile Lazyloading yapımı

Görsel içeriğin yoğun olduğu ve sayfa açılış hızının yüksek olmadığı bir websayfası düşünelim. Bu sayfanın SEO puanı ve haliyle kullanıcı deneyimi de bu yavaşlığa bağlı olarak düşük olacaktır.

Böyle bir durumda, lazyloading tekniğini kullanmak aklına gelmesi gereken ilk çözüm olmalı. Lazyloading, temel olarak ekran dışında olan resimleri yüklemeyi bekleterek, yalnızca kullanıcının görüş alanına girdiğinde yükleme işlemini başlatma konseptine deniyor. Bu şekilde, sitenin açılış sırasındaki yükleme yükünü düşürüp, zamana yaymış oluyoruz.

Lazyloading sistemimizi IntersectionObserver kullanarak yapacağız. Eğer bu fonksiyon hakkında bir bilgin yoksa, bu yazı serisinin ilk gönderisine kısaca göz atabilirsin.

Örnek Kod

Hemen bir örnek üzerinden gidelim. Html kodumuzda, rastgele bir kaç resim ekleyelim. Resimlerin src bölümlerine resim yok yazan aynı tip imajı yerleştirelim ve data diye bir özel etiket açıp, asıl resim kaynağını buraya yazalım. Bu html sayfası yüklenirken, her bir imajı ayrı ayrı almak yerine, resim yok imajımızı yükleyip her bir resim için bunu gösterecek.

.resimler {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1em;
}

img {
  width: 40%;
}

Resim dosyalarımızı biraz büyütüp ekran ortasına toplarlayalım

let ayarlar = {
  root: null,
  rootMargin: "0px",
  threshold: 0,
};
const lazyLoading = (objeler, observer) => {
  objeler.forEach((resim) => {
    if (resim.isIntersecting) {
      let data = resim.target.getAttribute("data");
      resim.target.src = data;
    }
  });
};

const observer = new IntersectionObserver(lazyLoading, ayarlar);
const resimler = document.getElementsByTagName("img");
Array.from(resimler).map((resim) => {
  observer.observe(resim);
});

JS dosyamızın lazyLoading callback fonksiyonunda yaptığım şey, resimlerden herhangi birisi ekrana girdiğinde, bu resmin data özelliğini okuyup, bunu src özelliğine yazıyorum.