Akademi JavaScript · Pelajaran

Memerhati Keterlihatan Elemen

Cipta pemerhati dan pantau elemen.

Pelajaran 1 daripada 413 langkah

Memerhati Keterlihatan Elemen ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Mengapa API Pemerhati Persilangan

Secara tradisional, mengesan apabila elemen memasuki ruang pandang memerlukan anda mendengar scroll dan memanggil getBoundingClientRect secara berterusan, yang perlahan dan menyebabkan paparan tersekat-sekat.

API Pemerhati Persilangan memantau keterlihatan dengan cekap dan secara tak segerak, di luar utas utama.

Mencipta observer

Anda mencipta observer dengan new IntersectionObserver(callback). Panggilan balik berjalan setiap kali keterlihatan elemen yang diperhatikan melintasi ambang.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Memerhati Elemen

Panggil observer.observe(element) untuk mula memantau sasaran. Satu observer boleh memantau banyak elemen.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Bendera isIntersecting

Setiap entri mempunyai isIntersecting boolean yang memberitahu anda sama ada sasaran kini bertindih dengan root, iaitu ruang pandang secara lalai.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Butiran Kemasukan

Setiap IntersectionObserverEntry membawa data yang berguna:

target — elemen yang diperhatikan
isIntersecting — sama ada elemen melintasi root
intersectionRatio — jumlah yang kelihatan, daripada 0 hingga 1
boundingClientRect — segi empat sasaran

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Pilihan threshold

Pilihan threshold menentukan nisbah keterlihatan apabila panggilan balik dicetuskan. 0 dicetuskan sebaik sahaja satu piksel kelihatan; 1 hanya dicetuskan apabila elemen kelihatan sepenuhnya.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Pilihan root

Secara lalai, observer mengukur berdasarkan kawasan pandangan pelayar. Tetapkan root kepada elemen leluhur yang boleh ditatal untuk mengukur keterlihatan dalam bekas tersebut.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Pilihan rootMargin

rootMargin membesarkan atau mengecilkan kotak sempadan root, seperti margin CSS. Nilai positif mencetuskan panggilan balik lebih awal, iaitu sebelum elemen benar-benar muncul pada skrin.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Menghentikan Pemerhatian

Panggil observer.unobserve(element) untuk berhenti memerhatikan satu elemen, atau observer.disconnect() untuk berhenti memerhatikan semuanya. Ini penting untuk pembersihan dan pencetus sekali sahaja.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Sebabnya Cekap

Pelayar mengira persilangan secara dalaman dan mengumpulkan pemberitahuan, bukannya menjalankan JavaScript anda pada setiap bingkai penatalan. Ini mengelakkan perubahan susun atur berulang dan memastikan penatalan kekal lancar walaupun terdapat banyak sasaran.

Kes Penggunaan Biasa

Intersection Observer menyokong banyak ciri dunia sebenar:

Pemuatan malas imej dan bingkai sebaris
Penatalan tanpa penghujung
Animasi yang dicetuskan oleh penatalan
Penjejakan paparan iklan atau kandungan

Kita akan membina beberapa daripadanya selepas ini.

Semakan Pantas

Uji pemahaman anda tentang asas Intersection Observer.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari asas Intersection Observer:

new IntersectionObserver(callback, options) mencipta satu observer.
observe memulakan pemerhatian; unobserve/disconnect menghentikannya.
Setiap entri menyediakan isIntersecting dan intersectionRatio.
threshold, root dan rootMargin menentukan masa ia dicetuskan.
Ia jauh lebih cekap berbanding pendengar penatalan.

Seterusnya, kita akan memuatkan imej secara malas dengannya.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memerhati Keterlihatan Elemen” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Memerhati Keterlihatan Elemen”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memerhati Keterlihatan Elemen”?

Cipta pemerhati dan pantau elemen. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Memerhati Keterlihatan Elemen” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript