Qu’est-ce qu’IntersectionObserver ? Introduction à IntersectionObserver

Cet article vous explique qu'est-ce qu'IntersectionObserver ? L'introduction d'IntersectionObserver a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Vous permet de suivre l'état d'intersection d'un élément cible avec ses éléments ou fenêtres ancêtres. De plus, vous pouvez choisir de déclencher la fonction de rappel même si seule une partie de l'élément apparaît dans la fenêtre, ne serait-ce qu'un seul pixel.

IntersectionObserver Pourquoi est-ce nécessaire ?

Lorsque nous devons surveiller si l'élément cible entre dans la fenêtre d'affichage, nous devons surveiller l'événement de défilement. Une grande quantité de calculs entraînera des problèmes de performances

Comment cela se produit-il. IntersectionObserver résout ce problème ?

L'API IntersectionObserver est asynchrone et ne se déclenche pas de manière synchrone avec le défilement de l'élément cible. Autrement dit, l'observateur ne sera exécuté que lorsque le thread est inactif. Cela signifie que la priorité de cet observateur est très faible et ne sera exécuté que lorsque d'autres tâches seront terminées et que le navigateur sera libre.

Objet IntersectionObserverEntry

nouveau IntersectionObserver (rappel, options)

    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'))

L'objet IntersectionObserverEntry fournit des informations sur l'élément cible, avec un total de six attributs.

{
time : l'heure à laquelle la visibilité change, qui est un horodatage de haute précision en millisecondes
target : l'élément cible observé, qui est un objet nœud DOM
rootBounds : le The de l'élément racine informations de la zone rectangulaire, la valeur de retour de la méthode getBoundingClientRect(), s'il n'y a pas d'élément racine (c'est-à-dire défilement directement par rapport à la fenêtre), null est renvoyé
boundingClientRect : les informations de la zone rectangulaire de ​​l'élément cible
intersectionRect : l'élément cible et Informations sur la zone d'intersection de la fenêtre (ou élément racine)
intersectionRatio : le rapport visible de l'élément cible, c'est-à-dire le rapport entre intersectionRect etboundingClientRect , qui vaut 1 lorsqu'il est entièrement visible et inférieur ou égal à 0 lorsqu'il est complètement invisible. Les options
}

incluent principalement les méthodes d'instance

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

observe()

pour observer un élément cible. Une instance d'observateur peut observer n'importe quel nombre d'éléments cibles. Notez que certains étudiants ici peuvent demander : Puis-je déléguer ? Puis-je simplement appeler la méthode observer une fois pour observer tous les éléments img d'une page, même ceux qui n'ont pas été générés ? La réponse est non, ce n’est pas un événement, il n’y a pas de bouillonnement.

unobserve()

Annuler l'observation d'un élément cible. Le chargement paresseux est généralement une opération unique. Le rappel de observe doit appeler unobserve() directement sur cet élément.

disconnect()

Ne plus observer tous les éléments cibles observés

takeRecords()

Comprendre cette méthode nécessite de parler de certaines choses sous-jacentes : à l'intérieur du navigateur, lorsqu'un observateur Si l'instance observe plusieurs actions qui se croisent à un certain moment, elle n'exécutera pas le rappel immédiatement. Elle appellera window.requestIdleCallback() (actuellement uniquement pris en charge par Chrome) pour exécuter de manière asynchrone la fonction de rappel que nous avons spécifiée, et elle stipule également le temps de retard maximum. est de 100 millisecondes, ce qui équivaut à l'exécution du navigateur :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!