Digital Transformation
Intersection Observer
TL;DR: Intersection Observer adalah API JavaScript native yang memberi tahu kapan elemen muncul di layar pengguna. API ini menggantikan event scroll yang mahal dengan callback asinkron, sehingga lazy-load gambar, animasi on-scroll, dan infinite scroll bisa berjalan tanpa membuat halaman tersendat.
Apa itu Intersection Observer?
Intersection Observer adalah Web API yang mengamati persimpangan antara sebuah elemen target dengan viewport atau elemen induknya. Browser akan memanggil callback yang Anda daftarkan ketika rasio visibilitas elemen berubah melewati ambang yang ditentukan. Pendekatan ini lebih hemat dibanding mendengarkan event scroll, karena browser membatasi kapan callback dieksekusi dan menjalankannya di luar render path.
Analogi sederhana: bayangkan satpam di pintu mall yang hanya melapor ketika pengunjung benar-benar masuk atau keluar, bukan mengikuti setiap langkah pengunjung di parkiran. Pola yang sama juga dipakai oleh teknik lazy loading untuk gambar dan video.
Cara Kerja Singkat
| Komponen | Fungsi |
|---|---|
root | Elemen pembanding, default-nya viewport |
rootMargin | Margin di sekitar root, misal 200px untuk preload lebih awal |
threshold | Rasio visibilitas pemicu, 0 sampai 1 |
callback | Fungsi yang dijalankan saat threshold tercapai |
Contoh penggunaan: new IntersectionObserver(callback, {threshold: 0.25}).observe(element). Browser akan mengirim entri ke callback saat 25 persen elemen masuk viewport. Untuk metrik viewport, baca dokumentasi resmi di MDN IntersectionObserver.
Kenapa Penting?
Bagi marketer dan developer Indonesia, Intersection Observer membantu menjaga halaman tetap ringan di jaringan 3G dan 4G. API ini cocok untuk lazy-load gambar produk, memicu animasi hanya ketika section terlihat, dan menghemat permintaan analytics dengan hanya mengirim event impression saat elemen benar-benar dilihat. Dampaknya terlihat pada metrik LCP dan INP karena beban kerja pindah dari scroll handler ke browser native.
Pertanyaan Umum
Apakah Intersection Observer mengganti event scroll?
Untuk kasus deteksi visibilitas, ya. Untuk parallax dan posisi pasti pixel, scroll handler masih relevan. Banyak tim memakai keduanya bersamaan sesuai kebutuhan.
Apakah API ini didukung semua browser?
Per 2026, semua browser modern termasuk Safari iOS 12 ke atas sudah mendukung. Untuk audiens lama, gunakan polyfill ringan dari W3C.
Istilah Terkait