Pemuatan Malas dengan IntersectionObserver
Tunda pemuatan gambar dan konten hingga masuk ke area pandang.
Pemuatan Malas dengan IntersectionObserver adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Melampaui loading="lazy" Bawaan
Pemuatan tertunda bawaan mencakup <img> dan <iframe>. Untuk hal lain—gambar latar, video, komponen yang mahal, dan widget pihak ketiga—IntersectionObserver merupakan alat yang tepat untuk menunda pekerjaan sampai elemen berada di dekat area pandang.
Polanya
Tandai elemen yang ditunda dengan atribut yang menyimpan sumber sebenarnya; tampilkan placeholder kecil. Amati setiap elemen; saat terjadi persinggungan, tukar atribut sumber tersebut dengan sumber sebenarnya (atau aktifkan elemen dengan cara lain) lalu gunakan unobserve agar fungsi panggilan balik tidak pernah dipicu lagi.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Gambar Latar yang Dimuat Tertunda
Gambar latar CSS tidak dapat dimuat secara tertunda secara bawaan. Saat terjadi persinggungan, tetapkan el.style.backgroundImage = `url("${el.dataset.bg}")`, atau tambahkan kelas CSS yang menetapkan gambar latar. Gambar mulai diunduh pada saat itu.
Video yang Dimuat Tertunda
Untuk video di bawah bagian awal halaman, jangan sertakan sumber dan elemen sumber pada awalnya. Saat terjadi persinggungan, sisipkan tag <source> dan panggil video.load(). Tanpa langkah ini, metadata video mungkin diunduh secara langsung bahkan sebelum pengguna menggulir mendekati elemen tersebut.
Widget Pihak Ketiga
Sisipan media sosial, widget komentar, dan skrip obrolan dapat memuat megabita data. Saat terjadi persinggungan, impor skrip penyiapan widget secara dinamis: await import("/embed.js"). Beban tersebut hanya ditanggung saat pengguna benar-benar menggulir ke bagian itu.
Iframe Tertunda (Melampaui loading="lazy")
Pemuatan tertunda iframe bawaan tetap mengunduh dokumen iframe. Untuk sisipan berat seperti peta dan pemutar video, gunakan pola "fasad": tampilkan gambar pengganti; saat diklik atau beririsan, ganti dengan iframe sebenarnya. Cara ini secara drastis mengurangi bobot awal halaman.
rootMargin untuk Pemuatan Awal
rootMargin: "200px" mulai memuat 200 piksel sebelum elemen memasuki area pandang. Sesuaikan berdasarkan kecepatan gulir: terlalu kecil membuat pengguna melihat placeholder saat menggulir cepat; terlalu besar menggagalkan tujuan pemuatan tertunda karena semuanya akan dimuat.
unobserve Saat Dipicu
Selalu panggil observer.unobserve(element) setelah pemuatan tertunda diaktifkan. Jika tidak, fungsi panggilan balik terus dipicu setiap kali elemen memasuki kembali area pandang—membuang CPU dan berpotensi menimbulkan kesalahan jika aktivasi tidak dapat dilakukan berulang kali dengan aman.
Sisakan Ruang
Tetapkan lebar dan tinggi pada gambar yang dimuat tertunda serta tinggi minimum pada wadah yang dimuat tertunda. Tanpa dimensi eksplisit, halaman akan ditata ulang saat konten dimuat—menyebabkan lompatan gulir yang mengganggu dan skor Cumulative Layout Shift yang buruk.
Cadangan untuk Tanpa JS
Untuk Peningkatan Progresif penuh, bungkus elemen tertunda dalam <noscript> dengan sumber sebenarnya: <noscript><img src="/photo.jpg"></noscript>. Pengguna tanpa JS mendapatkan gambar yang dimuat langsung; pengguna dengan JS mendapatkan versi yang dimuat tertunda. Padukan dengan markah atribut sumber yang tepat.
Pengelompokan Banyak Elemen
Satu instans observer dapat mengamati ratusan elemen secara efisien. Jangan membuat satu observer untuk setiap elemen. Buat satu observer bersama dengan opsi yang diinginkan, lalu gunakan observe() untuk mendaftarkan setiap target.
Menggabungkan dengan loading="lazy" Bawaan
Khusus untuk <img>, gunakan loading="lazy" sebagai mekanisme utama dan gunakan IntersectionObserver hanya untuk kasus yang tidak dicakup oleh pemuatan tertunda bawaan. Keduanya dapat dipadukan dengan baik: mekanisme bawaan menangani gambar di bawah bagian awal halaman; IntersectionObserver menangani gambar latar, komponen, dan pemuat khusus lainnya.
Uji Pengetahuan
Mengapa penting untuk memanggil observer.unobserve(element) setelah elemen yang dimuat tertunda diaktifkan?
Ringkasan
IntersectionObserver memperluas pemuatan tertunda melampaui <img loading="lazy"> bawaan hingga mencakup gambar latar, video, widget pihak ketiga, dan impor komponen dinamis. Gunakan placeholder sumber-data, tukar saat terjadi persinggungan, lalu gunakan unobserve setelah aktivasi. Lakukan pemuatan awal dengan rootMargin, sisakan ruang menggunakan lebar/tinggi, sediakan cadangan noscript, dan gabungkan dengan pemuatan tertunda bawaan jika sesuai.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemuatan Malas dengan IntersectionObserver” gratis?
Ya — teks lengkap “Pemuatan Malas dengan IntersectionObserver” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemuatan Malas dengan IntersectionObserver”?
Tunda pemuatan gambar dan konten hingga masuk ke area pandang. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Pemuatan Malas dengan IntersectionObserver” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- IntersectionObserver API dan Ambang Batas
- Pemuatan Malas dengan IntersectionObserver
- Implementasi Gulir Tanpa Akhir
- Menyiapkan Animasi yang Terhubung dengan Guliran