API Observer Persimpangan: Pemantauan masa nyata sama ada elemen boleh dilihat

Anda mungkin tidak tahu bahawa JavaScript secara senyap -senyap mengumpulkan banyak pemerhati pada tahun -tahun kebelakangan ini, dan Observer Persimpangan adalah salah satu alat yang berkuasa. Pemerhati adalah objek yang memantau peristiwa tertentu dalam masa nyata, sama seperti burung yang duduk di tempat kegemaran mereka dan menunggu burung muncul. Pemerhati yang berbeza memerhatikan matlamat yang berbeza.

Pemerhati pertama saya bersentuhan dengan pemerhati mutasi, yang mengesan perubahan pada pokok dom. Ia unik pada masa itu, tetapi sekarang kita mempunyai lebih banyak pemerhati.

Observer Persimpangan mengamati "persimpangan" antara elemen dan unsur nenek moyangnya atau kawasan yang kelihatan dari halaman (iaitu, viewport) (iaitu, elemen memasuki atau meninggalkan viewport). Ia agak seperti menonton kereta api di stesen. Anda dapat melihat apabila kereta api memasuki stesen, apabila ia meninggalkan stesen dan berapa lama ia berhenti.

Memahami apabila elemen akan memasuki bidang pandangan, apabila ia hilang, atau berapa lama ia telah berlalu sejak ia memasuki bidang pandangan sangat praktikal. Oleh itu, kita akan belajar tentang beberapa kes penggunaan - selepas kod untuk membuat objek IntersectionObserver melalui API Observer Persimpangan.

Tinjauan cepat IntersectionObserver

Pada masa penulisan, API Observer Persimpangan telah mendapat sokongan yang luas.

Penyemak imbas menyokong data dari Canciuse, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

Mudah alih/tablet

Walau bagaimanapun, jika anda ingin menyemak sama ada ia disokong semasa menggunakan pemerhati persimpangan, anda boleh menyemak sama ada harta intersectionoBserver wujud dalam objek tetingkap:

 jika (!! window.intersectionObserver) {}
/ * atau */
jika ('intersectionobserver' dalam tetingkap) {}

Ok, mari kita lihat penciptaan objek:

 var Observer = New IntersectionObserver (Callback, Options);

Pembina objek IntersectionObserver menerima dua parameter. Yang pertama ialah fungsi panggil balik , yang akan dilaksanakan apabila pemerhati melihat persimpangan dan melepasi beberapa data mengenai persimpangan secara tidak segerak.

Parameter kedua (pilihan) adalah pilihan , objek yang mengandungi maklumat yang mentakrifkan apa yang "salib". Kami mungkin tidak mahu tahu bila elemen akan memasuki bidang pandangan, tetapi hanya apabila ia kelihatan sepenuhnya . Perkara seperti ini ditakrifkan oleh parameter pilihan.

Pilihan mempunyai tiga sifat:

• Root - Unsur nenek moyang/viewport yang mana elemen yang diperhatikan akan menyeberang. Fikirkannya sebagai stesen di mana kereta api akan menyeberanginya.
• Rootmargin - perimeter elemen akar, mengecut atau membesarkan kawasan pemerhatian unsur akar untuk mengesan silang. Ia sama dengan harta margin CSS.
• Ambang - pelbagai nilai (antara 0 dan 1.0), masing -masing mewakili jarak unsur melintasi atau melintasi akar, di mana panggilan balik akan dicetuskan.

Katakan ambang kami ialah 0.5. Panggilan balik dicetuskan apabila elemen memasuki atau melebihi ambang separa kelihatannya. Sekiranya nilai itu [0.3, 0.6] , panggilan balik akan dicetuskan apabila elemen memasuki atau melebihi ambang yang kelihatan 30% dan ambang yang kelihatan 60%.

Itu semua tentang teori sekarang. Mari lihat beberapa demo. Pertama sekali, memuatkan malas.

Gunakan Kes 1: Imej memuatkan malas

Untuk melihat tag beban, periksa halaman ini kerana demo tertanam tidak memaparkan tag.

Trik CSS telah memperkenalkan pemuatan malas, yang biasanya dilakukan seperti ini: memaparkan pemegang tempat yang ringan, imej akan dipaparkan di kedudukan pemegang tempat, dan kemudian menggantikannya dengan imej yang diharapkan ketika memasuki (atau akan masuk) medan pandangan. Percayalah, tidak malas untuk melaksanakannya sama sekali - iaitu, sehingga kita mendapat beberapa kod asli untuk digunakan.

Kami akan menggunakan mekanisme yang sama. Pertama, kita mempunyai sekumpulan imej dan menentukan imej pemegang tempat yang pada mulanya dipaparkan. Kami menggunakan atribut data untuk membawa URL imej asal untuk dipaparkan, yang mentakrifkan imej yang akan dimuatkan apabila imej sebenar memasuki medan pandangan.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg" class="lazy" alt="Beberapa kegunaan berfungsi untuk pemerhati persimpangan untuk mengetahui bila elemen dilihat"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg" class="lazy" alt="Beberapa kegunaan berfungsi untuk pemerhati persimpangan untuk mengetahui bila elemen dilihat"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg" class="lazy" alt="Beberapa kegunaan berfungsi untuk pemerhati persimpangan untuk mengetahui bila elemen dilihat">

Selebihnya adalah skrip.

 Biarkan Observer = New IntersectionObserver (
(penyertaan, pemerhati) => { 
  entri.Foreach (entry => {
    /* mengendalikan setiap salib di sini*/
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

Fungsi panggil balik di atas adalah fungsi anak panah (walaupun anda boleh menggunakan fungsi normal).

Fungsi panggil balik menerima dua parameter: satu set penyertaan yang mengandungi maklumat mengenai setiap persimpangan; dan pemerhati itu sendiri. Penyertaan ini boleh ditapis atau dilingkari, dan kemudian memproses penyertaan salib yang kita inginkan. Bagi pilihan, saya hanya memberikan nilai rootmargin, yang membolehkan sifat akar dan ambang untuk mengambil nilai lalai mereka.

Nilai lalai akar adalah viewport, dan nilai lalai ambang adalah 0 - ini boleh ditafsirkan secara kasar sebagai "memberitahu saya ketika elemen muncul dalam viewport!"

Walau bagaimanapun, pelik, saya menggunakan rootmargin untuk mengurangkan bahagian bawah kawasan pemerhatian Viewport sebanyak 200 piksel. Kami biasanya tidak melakukan ini dalam pemuatan malas. Sebaliknya, kita mungkin meningkatkan margin atau mengekalkan lalai. Walau bagaimanapun, dalam kes ini, kita biasanya tidak mengurangkan margin. Saya melakukan ini hanya kerana saya ingin menunjukkan imej asal yang dimuatkan di ambang kawasan pemerhatian. Jika tidak, semua operasi akan berlaku dari pandangan.

Apabila imej memotong kawasan tontonan Viewport (200 piksel di atas bahagian bawah dalam demonstrasi), kami menggantikan imej pemegang tempat dengan imej sebenar.

 Biarkan Observer = New IntersectionObserver (
(penyertaan, pemerhati) => { 
entri.Foreach (entry => {
    /* Penggantian Pemegang Tempat*/
    entry.target.src = entry.target.dataset.src;
    Observer.unobserve (entry.target);
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

entry.target adalah elemen yang diperhatikan oleh pemerhati. Dalam kes kita, ini adalah elemen imej. Sebaik sahaja pemegang tempat digantikan dalam elemen imej, kita tidak lagi perlu memerhatikannya, jadi kita panggil kaedah pemerhati unobserve di atasnya.

Sekarang bahawa pemerhati sudah siap, sudah tiba masanya untuk mula memerhatikan semua imej menggunakan kaedah observe :

 document.QuerySelectorAll ('img'). foreach (img => {Observer.observe (img)});

Itu sahaja! Kami malas untuk memuatkan imej. Pergi ke demo seterusnya.

Gunakan Kes 2: Video Jeda Secara Automatik Apabila Elemen Meninggalkan Pandangan

Katakan kami menonton video di YouTube dan (atas sebab apa pun) kami ingin menatal ke bawah untuk membaca komen. Saya tidak tahu bagaimana keadaan anda, tetapi saya biasanya tidak menjeda video sebelum melakukan ini, yang bermaksud saya terlepas beberapa video semasa melayari.

Bukankah lebih baik jika video itu akan berhenti sejenak apabila kita menatal dari video? Ia akan menjadi lebih baik jika video disambung semula apabila ia memasuki semula bidang pandangan, jadi tidak perlu mengklik butang main atau jeda.

Observer persimpangan pasti boleh melakukan ini.

Inilah video kami di HTML:

<video controls="" src="OSRO-animation.mp4"></video>

Inilah cara kami menjeda dan memainkan video semasa setiap crossover (iaitu kemasukan):

 biarkan video = document.QuerySelector ('Video');
biarkan ispause = false; /* bendera untuk menjeda video secara automatik*/
Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { 
  entri.Foreach (entry => {
    jika (entry.intersectionRatio! = 1 &&! Video.pause) {
      video.pause (); Ispaused = true;
    }
    lain jika (isPaused) {video.play (); ispaused = false}
  });
}, {ambang: 1});
Observer.observe (video);

Sebelum saya menunjukkan kepada anda bagaimana untuk menjeda dan memainkan video semasa setiap salib (iaitu entri), saya ingin menarik perhatian anda ke harta ambang pilihan.

Nilai ambang ialah 1. Root dan rootmargin akan mengambil nilai lalai. Ini bersamaan dengan berkata, "Hei, beritahu saya apabila elemen itu dapat dilihat sepenuhnya dalam pandangan."

Sebaik sahaja salib berlaku dan panggilan balik dicetuskan, kami akan menjeda atau memainkan video mengikut logik berikut:

Saya tidak memanggil unobserve untuk video itu, jadi pemerhati terus menonton video dan berhenti setiap kali video meninggalkan pandangan.

Gunakan Kes 3: Lihat berapa banyak kandungan yang telah dilihat

Ini dapat dijelaskan dan dilaksanakan dalam pelbagai cara berdasarkan kandungan anda dan cara pilihan anda untuk mengukur berapa banyak kandungan yang telah dilihat.

Untuk contoh yang mudah, kami akan melihat perenggan terakhir setiap jawatan dalam senarai jawatan pada halaman. Sebaik sahaja perenggan terakhir artikel itu dapat dilihat sepenuhnya, kami akan mengandaikan bahawa artikel itu telah dibaca -seperti yang kita katakan bahawa melihat kereta terakhir kereta api bersamaan dengan melihat seluruh kereta api.

Ini adalah demo yang menunjukkan dua artikel di halaman, masing -masing mengandungi pelbagai perenggan teks.

HTML kami yang dipermudahkan kelihatan seperti ini:

<div></div>

<h2>Perkara 1</h2>
<p></p>

<h2>Perkara 2</h2>
<p></p>

biarkan n = 0; /* Jumlah artikel yang dilihat*/
biarkan Count = document.QuerySelector ('#count');
Biarkan Observer = New IntersectionObserver ((Entri, Observer) => { 
  entri.Foreach (entry => {
    jika (entry.isintersecting) {
      count.textcontent = `artikel sepenuhnya dilihat - $ {n}`; 
      Observer.unobserve (entry.target);
    }
  });
}, {ambang: 1});

document.QuerySelectorAll ('Artikel> P: Last-Child'). Foreach (p => {Observer.observe (P)});

Semasa setiap crossover (iaitu perenggan terakhir artikel ini dapat dilihat sepenuhnya), kami meningkatkan kaunter: n, yang mewakili jumlah artikel yang dibaca. Kami kemudian memaparkan nombor itu di atas senarai artikel.

Sebaik sahaja kita telah mengira crossover perenggan terakhir, kita tidak perlu memerhatikannya lagi, jadi kita panggil unobserve di atasnya.

Terima kasih atas penyertaan anda!

Inilah contoh dalam artikel ini yang akan kita lihat bersama. Anda mungkin telah belajar cara menggunakannya untuk memerhatikan unsur -unsur dan mencetuskan peristiwa berdasarkan persimpangan mereka dengan viewport.

Iaitu, berhati -hati diperlukan apabila membuat perubahan visual berdasarkan data silang yang diperoleh melalui pemerhati. Sudah tentu, pemerhati persimpangan sangat mudah apabila merakam cross-data. Walau bagaimanapun, apabila ia digunakan untuk membuat perubahan pada skrin, kita perlu memastikan perubahan tidak ketinggalan, yang merupakan kemungkinan kerana kita pada dasarnya membuat perubahan berdasarkan data yang diambil secara asynchronously . Ini mungkin mengambil sedikit masa untuk memuatkan.

Seperti yang dapat kita lihat, setiap entri silang mempunyai set atribut yang menyampaikan maklumat mengenai salib. Dalam jawatan ini, saya tidak meliputi semua sifat ini, jadi pastikan untuk menyemaknya.

Imej dipelihara dalam format asalnya. Perhatikan bahawa jadual kosong dalam input dan dengan itu kekal kosong dalam output. Saya juga telah membuat perubahan gaya untuk meningkatkan kebolehbacaan dan aliran, sambil mengekalkan makna asal.

Atas ialah kandungan terperinci Beberapa kegunaan fungsi untuk pemerhati persimpangan untuk mengetahui bila elemen dilihat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!