IntersectionObserver

JavaScript kursu · İleri seviye · Ders 91/100

Bir öğenin görünür alana girip çıkmasını gözlemleyerek lazy loading yapmayı öğrenirsin.

IntersectionObserver

IntersectionObserver bir öğenin görüntü alanıyla (viewport) kesişimini izler. Öğe ekrana girdiğinde ya da çıktığında haberdar olursun. En bilinen kullanımı tembel yükleme (lazy loading): görüntü alanına yaklaşan resimleri o anda yüklemek.

new IntersectionObserver(callback, options) ile oluşturursun. Callback her kesişim değişikliğinde bir entries dizisi alır. observe metodu hangi öğenin izleneceğini söyler.

Seçenekler: root, rootMargin, threshold

İkinci argüman bir seçenekler nesnesidir. Üç alanı vardır:

root: kesişimin ölçüldüğü ata öğe; varsayılan tarayıcı görüntü alanı
rootMargin: root etrafına eklenen kenar boşluğu, CSS margin biçiminde
threshold: ne kadarlık kesişimde tetikleneceği; 0 ile 1 arası veya dizi

Boş bırakırsan tümü varsayılan değerini alır: tüm görüntü alanı, sıfır kenar boşluğu, eşik 0.

Callback ve entry

Callback bir entries dizisi ve gözlemcinin kendisini alır. Her IntersectionObserverEntry bir öğenin o anki durumunu anlatır. En yararlı alanlar:

isIntersecting: öğe şu an kesişiyor mu?
target: izlenen öğenin kendisi
intersectionRatio: ne kadarlık kısmı görünüyor (0-1)

Çok öğe izliyorsan hepsi aynı dizi içinde gelir; target ile ayırt edersin.

Uygulama img öğesini görüntü alanında yakala

Bir IntersectionObserver oluştur. Callback entries dizisini alır; her entry için isIntersecting doğruysa entry.target'ı konsola yaz. Eşik 0 olsun ve observe(img) ile izlemeye başla.

Örnek çözümü göster

1. new IntersectionObserver((entries) => {...}) ile oluştur.
2. Her entry için isIntersecting doğruysa entry.target'ı konsola yaz.
3. { threshold: 0 } ayarla ve observer.observe(img) ile başla.

Örnek çözüm:
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry.target);
    }
  }
}, { threshold: 0 });
observer.observe(img);

Kendini test et

IntersectionObserver en çok hangi amaçla kullanılır?
- Resimleri görüntü alanına girince yüklemek
- Düğme tıklamalarını saymak
- Dizi uzunluğunu hesaplamak
- Renk değerlerini değiştirmek
Cevabı göster

Resimleri görüntü alanına girince yüklemek — Doğru. Tembel yükleme en yaygın kullanımdır; resim yalnızca görünür olunca yüklenir.

Eşiği %50 olarak ayarla

const io = new IntersectionObserver(callback, { threshold:____});

Cevabı göster

const io = new IntersectionObserver(callback, { threshold:0.5});

Entry alanlarını eşleştir

isIntersecting

Şu an görünüyor mu?
target

İzlenen öğe
intersectionRatio

Görünür oran
root

Kesişim ata öğesi

İleri seviye bölümündeki tüm dersler

IntersectionObserver