Menatal tak terhingga asli dengan API IntersectionObserver

API Observer Persimpangan: Memantau penglihatan elemen DOM dengan cekap

API Observer Persimpangan adalah API JavaScript-side pelanggan yang baru muncul untuk memantau penglihatan elemen DOM yang ditentukan, yang berguna untuk ciri-ciri seperti pemuatan malas, menatal tak terhingga, dan penglihatan iklan.

sokongan penyemak imbas dan polyfill

API ini agak baru dan kini mempunyai sokongan pelayar terhad, termasuk Chrome Desktop Edition 51, Chrome Android Edition 51, Android Webview 51, Opera 38 dan Opera Android Edition 38. Walau bagaimanapun, polyfill dalam pembangunan disediakan di GitHub, yang membolehkan pemaju mula menggunakan pemerhati persimpangan dengan segera.

Panduan Pelaksanaan Scrolling Infinite

Artikel ini akan memberikan penerangan terperinci tentang cara menggunakan API IntersectionObserver dan Polyfill untuk mencapai mod pengalaman pengguna yang tidak terhad, termasuk tetapan halaman, penciptaan skrip, dan pengurusan elemen sentinel. Panduan ini mengandungi ciri -ciri ES6/ES2015 seperti janji, rentetan templat, dan fungsi anak panah.

Konsep teras: elemen sentinel

Idea utama pelaksanaan Scrolling Infinite adalah menggunakan elemen di bahagian bawah senarai sebagai "sentinel", yang akan mencetuskan lebih banyak kandungan untuk dimuatkan apabila tetingkap penyemak imbas mendekati bahagian bawah halaman.

Tetapan halaman (html) Struktur badan halaman adalah senarai mudah:

Untuk memudahkan kod, kedua -dua item senarai awal dan halaman berikutnya akan dimuat secara dinamik melalui JavaScript. Kami juga memasukkan polyfill dan memaparkan mesej segera jika API tidak menyokongnya:

<code class="language-html"><ul class="listview"></ul></code>

Gaya CSS digunakan untuk menetapkan susun atur paparan senarai dan menyokong gaya cepat (lihat helaian gaya untuk butiran).

<code class="language-html"><div class="polyfill-notice">The polyfill is in use</div>
</code>

Penciptaan skrip (JavaScript)

pertama, instantiate a

objek:

IntersectionObserver

<code class="language-javascript">sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1});</code>

bermaksud bahawa pendengar acara akan dicetuskan hanya apabila elemen itu sepenuhnya dalam tetingkap. Unsur -unsur sentinel ditandai dengan sempadan oren semasa demonstrasi.

Pendengar Acara threshold: 1 akan melakukan operasi seperti mengeluarkan sentinel semasa, menetapkan penunjuk beban di bahagian bawah senarai, dan menggunakan kaedah

untuk memuatkan halaman seterusnya. Kaedah

mengembalikan janji yang menunjukkan apabila operasi ini selesai. Selepas itu, kita boleh memilih elemen Sentinel baru dan matikan penunjuk beban: nextPage nextPage Kaedah

<code class="language-javascript">sentinelListener = function(entries) {
  sentinel.unset();
  listView.classList.add('loading');
  nextPage().then(() => {
    updateSentinel();
    listView.classList.remove('loading');
  });
};</code>

Pilih sentinel baru dan pilih elemen pertama halaman yang baru dimuatkan:

updateSentinel

Selebihnya kod terutamanya melaksanakan fungsi

<code class="language-javascript">updateSentinel = function() {
  sentinel.set(listView.children[listView.children.length - pageSize]);
};</code>

. Apabila janji yang dikembalikan oleh

(permintaan rangkaian simulasi) diselesaikan, objek projek yang disediakan akan diberikan ke HTML dan ditambah ke akhir senarai. nextPage loadNextPage()

bacaan selanjutnya

lebih banyak dokumentasi mengenai API dan prinsipnya:

IntersectionObserver's Coming In View

• pemerhati persimpangan dijelaskan
• MDN - API IntersectionObserver

FAQ Observer API Intersection

(bahagian FAQ ditinggalkan di sini kerana teks asal mengandungi jawapan yang lengkap dan jelas.)

Atas ialah kandungan terperinci Menatal tak terhingga asli dengan API IntersectionObserver. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!