Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Scroll Events
Webdesign

Pengamat persimpangan: Melacak unsur-unsur yang bergulir ke tampilan

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

"Persimpangan pengamat" menyediakan cara untuk asynchronously mengamati perubahan pada persimpangan (tumpang) elemen. Ini dapat berhubungan dengan unsur-unsur lain, atau viewport. Dalam artikel ini kita akan melihat beberapa demo dan membahas relevansi yang persimpangan pengamat akan bermain di masa depan untuk web developer. Saya juga akan berbagi kode contoh untuk membantu Anda memulai untuk sesi eksperimen larut malam tersebut. Mari kita menyelam di!

Apa yang bisa lakukan pengamat persimpangan?

IntersectionObserver API memungkinkan Anda mendaftar fungsi callback yang dieksekusi ketika sebuah elemen yang sedang dipantau memasuki atau keluar elemen lain, atau viewport.

Ada banyak ide dan saran bersama di doc explainer W3C ini pada GitHub, namun, persimpangan pengamat dapat berguna untuk Native membangun fitur seperti:

  • Malas Loading
  • Bergulir tak terbatas
  • Pelaporan visibilitas/lokasi
  • Mengeksekusi animasi

Memeriksa demo ini oleh Dan Callahan untuk menjelaskan apa yang sedang kita bicarakan:

Untuk memulai dengan IntersectionObserver Mari kita menjelajahi langkah pengkodean yang tepat diperlukan. Anda dapat selalu pastikan browser/perangkat dimaksudkan mendukung IO API oleh referensi caniuse. Kita akan mulai dengan menciptakan pengamat dan membahas bagaimana hal itu dapat digunakan untuk memantau komponen.

Menciptakan pengamat

IntersectionObserver dimulai dengan mengharuskan sekelompok pilihan didefinisikan sebagai objek literal dan melewati sebagai argumen untuk objek didefinisikan pengamat.

Pilihan pengamat ini pada baris 2-4 akan menentukan beberapa rincian penting ketika datang untuk mendeteksi visibilitas elemen target sehubungan dengan akar. Argumen pertama objek pengamat (baris terakhir) mewakili panggilan balik (fungsi) yang dijalankan sebagai persyaratan terpenuhi oleh pengamat Anda. Argumen kedua merujuk kepada objek literal yang mengandung pilihan pengamat dan menerima sifat sebagai berikut:

  • akar: elemen Anda ingin menguji persimpangan melawan. Nilai null mengacu pada peramban viewport. Anda juga dapat melewati di DOM pemilih metode seperti document.querySelector('#mytargetobject').
  • rootMargin: jika Anda perlu untuk memperluas atau mengecilkan ukuran efektif elemen root sebelum komputasi persimpangan. Nilai-nilai ini berlalu mirip dengan margin CSS properti. Jika elemen root ditetapkan, nilai-nilai dapat persentase.
  • ambang batas: salah satu nomor atau sebuah array dari angka menunjukkan persentase target visibilitas pemicu pengamat callback. Nilai 1.0 berarti ambang batas tidak dianggap berlalu sampai setiap pixel terlihat, sedangkan 0 berarti unsur adalah benar-benar keluar dari pandangan.

Seperti yang saya sebutkan sebelumnya, Anda akan menangani callback argumen dengan membuat sebuah fungsi yang berisi logika kustom berdasarkan kebutuhan proyek Anda. Logika ini dijalankan Kapan saja elemen yang dipilih diamati terlihat dalam hubungannya dengan elemen root ditetapkan.

Logika dalam fungsi pengamat Anda dapat menjadi peristiwa-peristiwa seperti memuat gambar, menambahkan/menghapus kelas, atau mengendalikan visibilitas, tapi pilihan Anda untuk apa yang dapat dilakukan dari dalam tergantung pada kebutuhan dan tujuan Anda.

Setiap kali pengamat mendeteksi perubahan, perubahan acara ini dilaporkan (jenis seperti fungsi pelaporan objek acara) dari callback pengamat. Dengan menggunakan peristiwa ini memicu, kita dapat memeriksa untuk visibilitas unsur kami berhubungan dengan akar sebelum menjalankan logika tambahan apapun dengan mendeteksi properti pada perubahan acara. Beberapa pengembang akan mengganti perubahan dengan entri kata sebagai gantinya, tetapi kedua pendekatan bekerja sama.

Loop ini menyatakan "untuk setiap perubahan yang terdeteksi, periksa untuk melihat apakah elemen target saat ini terlihat (lebih besar dari 0) dalam hubungannya dengan akar didefinisikan." Rasio persimpangan membantu dalam pelaporan berapa banyak unsur terlihat menggunakan nilai antara 0.0 (tidak terlihat) dan 1.0 (sepenuhnya terlihat). Anda dapat berpikir persimpangan rasio seperti ambang batas properti didefinisikan dalam pilihan pengamat Anda.

Mengamati metode

Sejauh kita membuat pilihan objek, fungsi panggilan balik dan pengamat objek didefinisikan, tetapi kita masih tidak memiliki apa-apa untuk mengamati. Ini adalah dimana metode mengamati akan datang dalam layanan.

Metode ini menambahkan elemen ke serangkaian elemen target sedang diawasi oleh IntersectionObserver. Dalam contoh ini aku mengamati setiap gambar pada halaman oleh hasil yang didapat dari gambar pemilih referensi. Metode observe() yang akan terus memantau target sampai berikut terjadi: metode unobserve() atau disconnect() yang disebut bersama dengan target akar elemen atau persimpangan dihapus. Jika Anda tidak lagi perlu mengamati elemen terbaik untuk membuat panggilan ke unobserve() dan lulus dalam target Anda sebagai argumen.

Mendukung kondisi

Jika Anda perlu untuk menguji fitur dukungan API ini Anda bisa membungkus segala sesuatu dalam pernyataan bersyarat jika/lain seperti sehingga:

Karena persimpangan pengamat API masih berada di konsep kerja tahap saya mendorong Anda untuk fitur mendeteksi objek jendela, atau Anda juga dapat menemukan polyfills jika Anda suka.

Contoh langsung

Demo berikut berisi semua kode saya telah dibahas sejauh ini dengan beberapa tambahan tweak. Demo ini malas Load gambar ketika mereka sedang menampilkan 50% dari visibilitas mereka dalam kaitannya dengan viewport.

Anda mungkin melihat perilaku yang berbeda ketika datang ke elemen gambar dibandingkan dengan elemen img di Chrome dan Firefox. Kedua browser memuat unsur gambar sempurna, namun gambar metatags ambang kami bahkan dengan kendala ukuran mutlak didefinisikan. Mereka muncul untuk memuat ketika mereka sekitar 10% dalam pandangan vs ambang 50% yang didefinisikan dalam demo. Tinggalkan komentar di bawah ini jika Anda melihat keanehan ini, atau mengalami masalah dengan IntersectionObserver dan gambar khusus.

Berikut ini adalah demo lain yang membuat skenario bergulir tak terbatas bahwa citra beban malas yang menggunakan Ajax untuk memuat citra yang diperlukan.

Dalam skenario ini, aku sedang memasukkan sentinel ke DOM sebagai target saya diamati. Ini sentinel ditempatkan di sebelah item terakhir dalam scroller tak terbatas, dan sebagai sentinel datang ke tampilan, callback beban data, menciptakan item berikutnya, melekat DOM dan repositions sentinel. Jika Anda benar mendaur ulang sentinel, tidak ada panggilan tambahan ke observe() diperlukan. Berikut ini adalah diagram besar oleh tim pengembang Google untuk membantu menjelaskan secara visual pendekatan ini.

Sebuah catatan pada citra

Ketika sebuah elemen img dengan kendala lebar: 100% diamati, itu akan gagal untuk memuat. Itu berarti setiap citra yang dimuat dalam mode malas harus memiliki batasan yang didefinisikan dalam CSS atau inline sesuai masalah dengan elemen gambar yang kurang ketidakleluasaan adalah bahwa ada ukuran nol sebelum konten mereka dimuat; yang berarti bahwa mereka semua berpotongan viewport secara bersamaan ketika Anda gulir. Saya menduga getBoundingClientRect() adalah bagian dari alasan seperti ini adalah salah satu metode utama untuk mendapatkan elemen koordinat dan kendala.

Kesimpulan

Apakah Anda menggunakan IntersectionObserver dalam pekerjaan Anda sendiri benar menit ini? Apakah Anda tertarik untuk fitur ini dan kemungkinan membawa? Bisa IntersectionObserver menggantikan kebutuhan berdasarkan aktivitas fitur seperti posisi: lengket? Secara pribadi saya merasa API baru ini merupakan tambahan yang padat spesifikasi kami dan saya bersemangat menantikan pertumbuhan terus selama bertahun-tahun mendatang.

Saya telah menyertakan beberapa link yang berguna di bawah ini dan mendorong Anda untuk menyelam lebih dalam waktu luang Anda. Setiap link akan membantu Anda mendapatkan pemahaman yang lebih baik dari bagaimana API baru ini bekerja dan fungsi. Jika Anda memiliki tips atau trik untuk pembaca lainnya meninggalkan mereka di komentar di bawah ini. Seperti biasa, bahagia coding!

Link

  • LazyLoad (vanili-lazyload)
  • Persimpangan pengamat contoh
  • Lazy loading gambar menggunakan persimpangan pengamat oleh Dean Hume
  • Contoh IntersectionObserver
  • Persimpangan pengamat API pada mozilla.org
  • Malas Loading gambar dengan persimpangan pengamat oleh Cory Dowdy
  • Menggunakan persimpangan pengamat API untuk memicu animasi dan transisi pada Alligator.io
  • IntersectionObserver's datang ke tampilan Surma
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.