Svelte ve Intersection Oberver ile Lazy-Load

Bir web sitesinde birçok içerik sunuyormuş gibi hayal edin. Aşağıdaki gibi birçok yüksek kaliteli resme sahip olduğunuzu varsayalım

Tüm resimleri görmek için kaydırın

Yukarıdaki resimlerin toplamı 10MB'den fazla! Bu kadar veriyi yüklemek kesinlikle kullanıcı arayüzünde sürtünmelere neden olur, özellikle düşük veri ortamlarında bulunan kullanıcılar için.

Svelte, webp gibi formatlarda resimler sunmanıza yardımcı olan enhanced:img gibi araçlar sağlar.

Ancak, resimleriniz çok büyükse, bu çözüm size tam bir çözüm sunmayabilir. İşte burada lazy loading (gec yukleme) devreye giriyor.

Lazy Loading

Lazy Loading fikri, içeriği kullanıcı ona kaydırdığında yüklemeyi beklemektir.

Bu şekilde, başlangıçta yalnızca görünüm alanında görünen içeriği yükleyebilir ve diğerlerini yüklemeyi bekleyebiliriz. Bu, yüklenme süresini önemli ölçüde azaltacaktır.

Bu fikir, Svelte'de aşağıdaki gibi uygulanabilir.

{#each images as image}
 {#if scrolledToImage}
  <img src={image} />
 {/if}
{/each}

Daha iyi bir kullanıcı deneyimi sağlamak için solmaya geçişler ekleyebiliriz. Bu, kullanıcı kaydırdıkça resimlerin yüklendiği gibi görünmesini sağlar, ki bu aslında gerçektir.

<script>
import { fade } from 'svelte/transition';
let images = [img1, img2, img3, ...]
let scrolls = [scrollForImg1, scrollForImg2, scrollForImg3, ...]
</script>
 
{#each images as image, index}
 {#if scrolls[index]}
  <div transition:fade={{ duration: 300 }}>
   <img src={image} />
  </div>
 {/if}
{/each}

Svelte'de geçişlerin çalışması için, DOM'a girmeleri gerekmektedir ve burada if ifadesi bize yardımcı olur.

İf ifadesi, lazy loading'in omurgasıdır, çünkü scroll yapilmayan elementler render edilmez ve resimler yuklenmez.

Şimdi kullanıcının sorunlu resme kaydırılıp kaydırılmadığını nasıl belirleyebileceğimizi görelim, yani scrolledToImage. Bu noktada, Intersection Observer API kullanacağız.

Intersection Observer

Üstünde ayrıntılı olarak durmayacağım, çünkü bu yukarıdaki bağlantıda bulunabilir, ancak Intersection Observer'ın ne yaptığı, bir öğenin başka bir öğeyi kesiştirdiğinde bir olayın tetiklenmesidir. Örneğin, viewport olarak temel öğeyi kullandığımızda, kesişme, öğenin kaydırıldığı anlamına gelir.

Sözdizimi aşağıdaki gibidir:

let callback = (entries, observer) => {
 entries.forEach((entry) => {
  if (entry.isIntersecting) {
   // resmi yükle
  }
 });
};

let observer = new IntersectionObserver(callback, { threshold: 0 }); 
// threshold:0, öğenin herhangi bir kısmının görünüm alanıyla kesiştiği anlamına gelir. Yani görünüm kaydırıldı.
 
observer.observe(element);

IntersectionObserver çağrılmalıdır, çünkü bu nesne Svelte'de monte edildikten sonra mevcut değildir, aksi takdirde hata verecektir.

Hepsini Bir Araya Getirme

<script>
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';

// Görüntü divlerini tutacak dizi
let divs = images.map(() => null);

// Bir resmin kaydırıldığına dair bilgileri tutacak dizi
let scrolls = images.map(() => false);

// Bileşen dağlandığında etkileşim gözlemcisiyi kurun
onMount(async () => {
 let callback = (entries, observer) => {
  entries.forEach((entry) => {
   if (entry.isIntersecting) {
    // hedef id'yi alırız, bu bizi doğru öğe konumuna yönlendirir scrolls dizisinde
    scrolls[entry.target.id] = true;
   }
  });
 };

 // Resimlerin ana div'i olan "container" id'li div'i kök olarak ayarlayın
 let observer = new IntersectionObserver(callback, { threshold: 0, root: document.querySelector('#container') });

 // Her bir divi gözlemleyin
 divs.forEach((d) => {observer.observe(d)});
});
</script>

// NOT1: Her resmin ana div'inin başlangıç yüksekliğine sahip olması gerekir. (Örn. 300px)
// Aksi takdirde, başlangıçta 0'a varsayılan olarak ayarlanır,
// ve tüm resimler konteyner ile kesişir.
// Bu, tüm resimleri bir kerede yükler ve amacımıza aykırı olur.

// NOT2: transition:fade img öğesine EKLENMEMELİDİR
// Bunun yerine, bir kapsayıcı div ekleyin ve onu bu div'e ekleyin
// Aksi takdirde, geçişler resim öğelerinde çalışmaz.

<div id="container">
 {#each images as image, index}
  <div bind:this={divs[index]} id={index} class="min-h-[300px]">
   {#if scrolls[index]}
    <div transition:fade={{ duration: 500 }}>
     <img src={image} class="h-[300px] object-contain" alt="Bir nesne" />
    </div>
   {/if}
  </div>
 {/each}
</div>

Şimdi yukarıdaki kodun yukarıda gördüğümüz konteynırda çalışıp çalışmayacağını görelim:

Evet! Ve şık görünüyor değil mi. Şimdi Svelte geçiş ve Intersection Observer'ın gücüyle şık lazy loader'lar oluşturabilirsiniz.

Resimlerin gerçekten lazy load yapildigini kontrol edelim:

Chrome geliştirici araçlarında görebilirsiniz ki, konteyner kaydırılmadığında, yani varsayılan kaydırma konumunda, yalnızca 2 divde resimler bulunmaktadır. Ve kalan divlerde hiç resim yok.

Bu nedenle, başlangıçta yalnızca 2 resim yüklediğimizi görebiliriz. Kullanıcı kaydırmazsa, bu böyle kalacaktır. Kullanıcı kaydırmaya karar verirse, kullanıcı kaydırdıkça yükleyeceğiz. Bu, içerik sunumunda kullanıcı odaklı ve kaynak tasarrufu sağlayan bir yaklaşımdır.

Sonuç

Umarım bu yazıyı okuduktan sonra Svelte geçişleri ve Intersection Observer ile bir lazy loader oluşturabilirsiniz. Nasıl gittiğini bana bildirin!

Keyifli kodlamalar!