Intersection Observer Nedir?
İngilizce: Intersection Observer
Intersection Observer, bir öğenin görünüm alanına veya seçili kapsayıcıya ne zaman girip çıktığını asenkron izleyen tarayıcı API'sidir.
Intersection Observer Nedir?
Intersection Observer, bir HTML öğesinin tarayıcı görünüm alanıyla veya belirlenen bir kapsayıcıyla kesişip kesişmediğini asenkron olarak izleyen tarayıcı API’sidir. Eski yaklaşımda scroll event sürekli dinlenir ve her kaydırmada konum hesaplanırdı; bu da ana iş parçacığını gereksiz yorabilirdi.
API, izlenecek öğe için bir callback ve seçenekler alır. root hangi kapsayıcının referans alınacağını, rootMargin sınırın ne kadar genişletileceğini, threshold ise görünürlüğün hangi oranında callback çalışacağını belirler. Öğe görünür olduğunda görsel yüklemek, animasyon başlatmak veya sonsuz listeye yeni kayıt eklemek mümkündür.
Kullanım Alanları
Lazy loading, infinite scroll, reklam görünürlük ölçümü, içerik okunma analizi ve scroll tabanlı animasyonlar en yaygın kullanım alanlarıdır. Örneğin ürün kartı görünmeden görselini indirmemek, mobil sayfalarda veri tüketimini ve yükleme süresini azaltır.
Performans Notları
Intersection Observer, her kaydırma anında manuel hesaplama yapma ihtiyacını azaltır; yine de callback içinde ağır işlem yapılırsa performans sorunu devam eder. Büyük listelerde gözlemci sayısı, görsel boyutları ve performance budget birlikte değerlendirilmelidir. Hesaplama yoğun işler için web worker ayrı bir seçenek olabilir.