Was ist IntersectionObserver? Einführung in IntersectionObserver

In diesem Artikel erfahren Sie, was IntersectionObserver ist. Die Einführung von IntersectionObserver hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Ermöglicht Ihnen, den Schnittpunktstatus eines Zielelements mit seinen Vorgängerelementen oder -fenstern zu verfolgen. Darüber hinaus können Sie die Rückruffunktion auch dann auslösen, wenn nur ein Teil des Elements im Ansichtsfenster angezeigt wird, selbst wenn es nur ein Pixel ist.

IntersectionObserver Warum wird es benötigt?

Wenn wir überwachen müssen, ob das Zielelement in das Ansichtsfenster gelangt, müssen wir das Scroll-Ereignis überwachen. Eine große Anzahl von Berechnungen führt zu Leistungsproblemen.

Wie funktioniert das? IntersectionObserver dieses Problem lösen?

IntersectionObserver API ist asynchron und wird nicht synchron mit dem Scrollen des Zielelements ausgelöst. Das heißt, der Beobachter wird nur ausgeführt, wenn der Thread inaktiv ist. Dies bedeutet, dass die Priorität dieses Beobachters sehr niedrig ist und nur ausgeführt wird, wenn andere Aufgaben abgeschlossen sind und der Browser frei ist.

IntersectionObserverEntry-Objekt

neues IntersectionObserver(Rückruf, Optionen)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry-Objekt stellt Informationen über das Zielelement mit insgesamt sechs Attributen bereit.

{
Zeit: die Zeit, zu der sich die Sichtbarkeit ändert. Dies ist ein hochpräziser Zeitstempel in Millisekunden.
Ziel: das beobachtete Zielelement, bei dem es sich um ein DOM-Knotenobjekt handelt.
rootBounds: Das Wurzelelement Informationen zum rechteckigen Bereich, der Rückgabewert der Methode getBoundingClientRect(). Wenn kein Stammelement vorhanden ist (dh direkt relativ zum Ansichtsfenster gescrollt wird), wird null zurückgegeben
boundingClientRect: die Informationen zum rechteckigen Bereich von ​​das Zielelement
intersectionRect: das Zielelement und Informationen über den Schnittbereich des Ansichtsfensters (oder Wurzelelements)
intersectionRatio: das sichtbare Verhältnis des Zielelements, also das Verhältnis vonIntersectionRect zu BoundingClientRect , was 1 ist, wenn es vollständig sichtbar ist, und kleiner oder gleich 0, wenn es vollständig unsichtbar ist.
}

Zu den Optionen gehören hauptsächlich

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

Instanzmethoden

observe()

um ein Zielelement zu beobachten. Eine Beobachterinstanz kann eine beliebige Anzahl von Zielelementen beobachten. Beachten Sie, dass einige Studenten hier möglicherweise fragen: Kann ich delegieren? Kann ich die Beobachtungsmethode einfach einmal aufrufen, um alle img-Elemente auf einer Seite zu beobachten, auch diejenigen, die nicht generiert wurden? Die Antwort ist nein, das ist kein Ereignis, es gibt keine Blasenbildung.

unobserve()

Das Abbrechen der Beobachtung eines Zielelements ist normalerweise ein einmaliger Vorgang. Der Rückruf von observe() sollte direkt für dieses Element aufgerufen werden.

disconnect()

Beobachtung aller beobachteten Zielelemente aufheben

takeRecords()

Um diese Methode zu verstehen, müssen einige zugrunde liegende Dinge besprochen werden: im Browser, wenn Wenn ein Beobachter Wenn die Instanz zu einem bestimmten Zeitpunkt mehrere sich überschneidende Aktionen beobachtet, führt sie den Rückruf nicht sofort aus. Sie ruft window.requestIdleCallback() auf (derzeit nur von Chrome unterstützt), um die von uns angegebene Rückruffunktion asynchron auszuführen, und legt außerdem die maximale Verzögerungszeit fest beträgt 100 Millisekunden, was dem Browser entspricht, der Folgendes ausführt:

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

Das obige ist der detaillierte Inhalt vonWas ist IntersectionObserver? Einführung in IntersectionObserver. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!