IntersectionObserver ile Sonsuz Kaydırma

Bu yazı, IntersectionObserver ile Sonsuz Kaydırma konusunu temelden ele alıyor. Önce kavramın ne işe yaradığını, ardından 6 kritik noktayı ve bunları bir araya getiren JavaScript örneğini adım adım inceleyeceğiz.

Konuya genel bakış

Sayfanın sonuna gelindiğinde yeni içerik yüklemek için eskiden scroll olayı dinlenir ve her kaydırmada konum hesaplanırdı; bu da özellikle mobilde takılmalara yol açardı. IntersectionObserver API'si, bir öğe görünür alana girdiğinde tarayıcının sizi haberdar etmesini sağlar; hesaplama tarayıcıya kalır, sayfa akıcı kalır.

Kritik noktalar

• Gözcü öğe: Listenin sonuna boş bir işaret öğesi koyun; o göründüğünde sıradaki sayfayı yükleyin.
• rootMargin: Pozitif bir kenar payı, kullanıcı sona varmadan yüklemeyi başlatır ve bekleme hissini ortadan kaldırır.
• Çift istek koruması: Bir yükleme sürerken yenisini başlatmamak için bir durum bayrağı kullanın ve finally içinde sıfırlayın.
• disconnect: Son sayfaya gelindiğinde gözlemciyi kapatın; sunucuya boşuna istek gitmesin.
• Sayfalı adresler: Arama motorları ve klavye kullanıcıları için ?sayfa=2 gibi normal sayfa bağlantılarını da sunun.
• Yalnız görseller için: Görselleri geciktirmek istiyorsanız img etiketine loading="lazy" eklemek yeterlidir; JavaScript gerekmez.

JavaScript ile uygulama

Aşağıdaki JavaScript örneği, yukarıdaki noktaların gerçek bir kodda nasıl bir araya geldiğini gösteriyor:

const liste = document.querySelector('#yazilar');
const isaret = document.querySelector('#daha-fazla');
let sayfa = 1;
let yukleniyor = false;

const gozlemci = new IntersectionObserver(async ([giris]) => {
  if (!giris.isIntersecting || yukleniyor) return;
  yukleniyor = true;
  try {
    const yanit = await fetch(`/api/yazilar?sayfa=${sayfa + 1}`);
    const { yazilar, sonSayfa } = await yanit.json();
    yazilar.forEach((y) => {
      const li = document.createElement('li');
      li.textContent = y.baslik;
      liste.append(li);
    });
    sayfa++;
    if (sonSayfa) gozlemci.disconnect();
  } finally {
    yukleniyor = false;
  }
}, { rootMargin: '400px' });   // sona 400 piksel kala yüklemeye başla

gozlemci.observe(isaret);

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Avantajları

Kısaca özetlemek gerekirse:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Özetle

IntersectionObserver ile Sonsuz Kaydırma, küçük ama düzenli adımlarla ustalaşılan konulardan biri. Özellikle Gözcü öğe ve Yalnız görseller için başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• MySQL İndeksleri ile Sorgu Hızlandırma
• JavaScript Fetch API ve async/await ile Veri Çekme
• Tailwind CSS ile Titreşimsiz Dark Mode

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.