Memahami Intersection Observer API

API Pemerhati Persimpangan ialah API web moden yang direka bentuk untuk memerhati perubahan dalam persilangan elemen sasaran dengan elemen nenek moyang atau port pandang. Ia menyediakan cara untuk memerhati perubahan secara tak segerak dalam persilangan elemen dengan elemen nenek moyang atau dengan port pandangan dokumen peringkat atas. Ini amat berguna untuk melaksanakan pemuatan imej yang malas, menatal tanpa had atau mencetuskan animasi apabila elemen kelihatan.

Ciri dan Faedah Utama

1. Pemerhatian Asynchronous: Tidak seperti pendengar acara, panggil balik Intersection Observer dilaksanakan secara tidak segerak, menghalangnya daripada menyekat urutan utama dan memastikan prestasi yang lebih baik.
2. Pengurusan Cekap: Berbilang elemen boleh diperhatikan dengan satu contoh Pemerhati Persimpangan, mengurangkan penggunaan sumber.
3. Konfigurasi Ambang: Pembangun boleh mentakrifkan satu set ambang untuk menentukan masa untuk mencetuskan panggilan balik, menawarkan kawalan terperinci ke atas apabila pemerhatian dibuat.

Mencipta Pemerhati Persimpangan

Untuk mencipta Intersection Observer, anda perlu membuat instantiate objek IntersectionObserver baharu dan lulus fungsi panggil balik dan objek pilihan. Berikut ialah sintaks asas:

let observer = new IntersectionObserver(callback, options);

• Fungsi Panggilan Balik: Fungsi ini dilaksanakan apabila elemen yang diperhatikan bersilang dengan elemen akar atau port pandangan.
• Objek Pilihan: Objek ini mengkonfigurasi gelagat pemerhati.

Fungsi Panggilan Balik

Fungsi panggil balik mengambil dua argumen: tatasusunan objek IntersectionObserverEntry dan pemerhati itu sendiri.

function callback(entries, observer) {
    entries.forEach(entry => {
        // Handle each intersection change
    });
}

Objek Pilihan

Objek pilihan boleh mempunyai sifat berikut:

• root: Elemen yang digunakan sebagai port pandangan untuk menyemak keterlihatan sasaran. Lalai kepada port pandangan penyemak imbas jika tidak dinyatakan.
• rootMargin: Offset digunakan pada kotak sempadan akar. Ini boleh berguna untuk mencetuskan panggilan balik sebelum atau selepas elemen sebenarnya dilihat. Ia menerima nilai yang serupa dengan sifat jidar CSS (cth., "10px 20px 30px 40px").
• ambang: Satu nombor atau tatasusunan nombor yang menunjukkan pada peratusan keterlihatan sasaran panggilan balik pemerhati harus dilaksanakan. Nilai 0.5 bermakna panggilan balik akan dilaksanakan apabila 50% daripada sasaran kelihatan.

Contoh Penggunaan

Malas Memuatkan Imej

Satu kes penggunaan biasa untuk Intersection Observer API ialah malas memuatkan imej. Imej hanya dimuatkan apabila ia masuk ke dalam port pandangan, mengurangkan masa pemuatan awal dan menjimatkan lebar jalur.

<img data-src="image.jpg" alt="Lazy Loaded Image">

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = document.querySelectorAll('img[data-src]');

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.getAttribute('data-src');
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => {
        observer.observe(img);
    });
});

Tatal Tak Terhingga

Satu lagi kes penggunaan sedang melaksanakan penatalan tak terhingga, di mana lebih banyak kandungan dimuatkan semasa pengguna menatal berhampiran bahagian bawah halaman.

<div class="content"></div>
<div class="loader">Loading...</div>

let content = document.querySelector('.content');
let loader = document.querySelector('.loader');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
});

observer.observe(loader);

function loadMoreContent() {
    // Fetch and append new content to the content div
}

Animasi pada Tatal

Anda juga boleh menggunakan Intersection Observer API untuk mencetuskan animasi apabila elemen kelihatan.

<div class="animate-on-scroll">Animate me!</div>

let animateElements = document.querySelectorAll('.animate-on-scroll');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animated');
        } else {
            entry.target.classList.remove('animated');
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
});

animateElements.forEach(el => {
    observer.observe(el);
});

Pilihan Lanjutan

Berbilang Ambang

Anda boleh menentukan berbilang ambang untuk mencetuskan panggilan balik pada tahap keterlihatan yang berbeza.

let options = {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25, 0.5, 0.75, 1]
};

Margin Akar Dinamik

Anda boleh melaraskan margin akar secara dinamik berdasarkan keadaan yang berbeza.

let options = {
    root: null,
    rootMargin: calculateRootMargin(),
    threshold: 0
};

function calculateRootMargin() {
    // Calculate and return root margin based on conditions
}

API Intersection Observer menyediakan cara yang berkuasa dan cekap untuk mengendalikan perubahan keterlihatan elemen pada halaman web. Ia menawarkan kawalan berbutir halus dengan ambang boleh disesuaikan dan margin akar, dan sifat tak segeraknya memastikan ia tidak menyekat benang utama. Dengan memanfaatkan API ini, pembangun boleh melaksanakan ciri seperti memuatkan malas, menatal tanpa had dan animasi pada tatal, meningkatkan pengalaman dan prestasi pengguna.

Atas ialah kandungan terperinci Memahami Intersection Observer API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!