Quelques utilisations fonctionnelles pour l'observateur d'intersection pour savoir quand un élément est en vue

API d'observateur d'intersection: surveillance en temps réel de savoir si les éléments sont visibles

Vous ne savez peut-être pas que JavaScript a discrètement accumulé de nombreux observateurs ces dernières années, et Intersection Observer est l'un des outils puissants. Les observateurs sont des objets qui surveillent les événements spécifiques en temps réel, tout comme les ornithologues amateurs sont assis dans leur endroit préféré et attendent que l'oiseau apparaisse. Différents observateurs observent différents objectifs.

Le premier observateur avec lequel je suis entré en contact était l'observateur de mutation, qui détecte les modifications de l'arbre Dom. C'était unique à l'époque, mais maintenant nous avons plus d'observateurs.

L'observateur d'intersection observe «l'intersection» entre un élément et son élément ancêtre ou la zone visible de la page (c'est-à-dire la fenêtre) (c'est-à-dire que l'élément entre ou quitte la fenêtre). C'est un peu comme regarder un train passer par une station. Vous pouvez voir quand le train entre dans la gare, lorsqu'il quitte la station et combien de temps il s'est arrêté.

Comprendre quand un élément est sur le point d'entrer dans le champ de vision, quand il disparaît, ou combien de temps il est passé depuis son entrée dans le champ de vision est très pratique. Par conséquent, nous découvrirons certains cas d'utilisation - après le code pour créer l'objet IntersectionObserver via l'API d'observateur d'intersection.

IntersectionObserver Aperçu rapide

Au moment de la rédaction du moment de la rédaction, l'API de l'intersection Observer a reçu un soutien étendu.

Le navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Bureau

Mobile / tablette

Cependant, si vous souhaitez vérifier s'il est pris en charge lors de l'utilisation d'Observer Intersection, vous pouvez vérifier si la propriété IntersectionObserver existe dans l'objet Windows:

 if (!! window.INTERSECTIONOBSERVER) {}
/* ou */
if ('intersectionobserver' dans la fenêtre) {}

Ok, jetons un coup d'œil à la création de l'objet:

 var observer = new intersectionObserver (rappel, options);

Le constructeur de l'objet IntersectionObserver accepte deux paramètres. Le premier est la fonction de rappel , qui sera exécutée lorsque l'observateur remarque l'intersection et transmet certaines données sur l'intersection de manière asynchrone.

Le deuxième paramètre (facultatif) est des options , un objet contenant des informations qui définissent ce qu'est "Cross". Nous ne voulons peut-être pas savoir quand l'élément est sur le point d'entrer dans le champ de vision, mais uniquement lorsqu'il est entièrement visible. Des choses comme celle-ci sont définies par le paramètre Options.

Options a trois propriétés:

• Racine - L'élément / fenêtre d'ancêtre avec lequel l'élément observé se croisera. Considérez-le comme la station où le train le traversera.
• Rootmargin - Le périmètre de l'élément racine, rétrécissant ou élargissant la zone d'observation de l'élément racine pour détecter les croisements. Il est similaire à la propriété CSS Marge.
• Seuil - un tableau de valeurs (entre 0 et 1,0), chacun représentant la distance que l'élément traverse ou traverse la racine, à laquelle le rappel sera déclenché.

Supposons que notre seuil soit de 0,5. Un rappel est déclenché lorsqu'un élément entre ou dépasse son seuil semi-visible. Si la valeur est [0.3, 0.6] , un rappel sera déclenché lorsque l'élément entre ou dépasse son seuil visible à 30% et son seuil visible à 60%.

C’est tout sur la théorie maintenant. Voyons quelques démos. Tout d'abord, chargement paresseux.

Cas d'utilisation 1: images de chargement paresseux

Pour afficher la balise de chargement, vérifiez cette page car la démo intégrée n'affiche pas la balise.

CSS-Tricks a déjà entièrement introduit le chargement paresseux, ce qui est généralement fait comme ceci: affiche un espace réservé léger, l'image sera affichée à la position de l'espace réservé, puis la remplace par l'image attendue lorsqu'elle entre (ou est sur le point d'entrer) le champ de vision. Croyez-moi, il n'est pas paresseux de l'implémenter du tout - c'est-à-dire jusqu'à ce que nous obtenions un code natif à utiliser.

Nous appliquerons le même mécanisme. Tout d'abord, nous avons un tas d'images et définissons une image d'espace réservé qui est initialement affichée. Nous utilisons un attribut de données pour transporter l'URL de l'image d'origine à afficher, qui définit l'image à charger lorsque l'image réelle entre dans le champ de vision.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Quelques utilisations fonctionnelles pour l'observateur d'intersection pour savoir quand un élément est en vue"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Quelques utilisations fonctionnelles pour l'observateur d'intersection pour savoir quand un élément est en vue"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Quelques utilisations fonctionnelles pour l'observateur d'intersection pour savoir quand un élément est en vue">

Les autres sont des scripts.

 Soit Observer = New IntersectionObserver (
(entrées, observateur) => { 
  entrées.ForEach (entrée => {
    / * gérer chaque croix ici * /
  });
}, 
{rootmargin: "0px 0px -200px 0px"});

La fonction de rappel ci-dessus est une fonction flèche (bien que vous puissiez utiliser une fonction normale).

La fonction de rappel reçoit deux paramètres: un ensemble d' entrées contenant des informations sur chaque intersection; et l'observateur lui-même. Ces entrées peuvent être filtrées ou en boucle, puis traiter les entrées croisées que nous voulons. En ce qui concerne les options, je ne fournit que la valeur rootmargin, permettant aux propriétés racine et seuil de prendre leurs valeurs par défaut.

La valeur par défaut de la racine est la fenêtre, et la valeur par défaut du seuil est de 0 - cela peut être à peu près interprété comme "me notifiant le moment où l'élément apparaît dans la fenêtre!"

Cependant, étrangement, j'ai utilisé Rootmargin pour réduire le bas de la zone d'observation de la fenêtre de 200 pixels. Nous ne faisons généralement pas cela en chargement paresseux. Au lieu de cela, nous pourrions augmenter les marges ou le maintenir par défaut. Cependant, dans ce cas, nous ne réduisons généralement pas les marges. Je le fais simplement parce que je veux démontrer l'image d'origine chargée au seuil de la zone d'observation. Sinon, toutes les opérations se produiront hors de vue.

Lorsque l'image coupe la zone de visualisation de la fenêtre (200 pixels au-dessus du bas dans la démonstration), nous remplaçons l'image d'espace réservé par l'image réelle.

 Soit Observer = New IntersectionObserver (
(entrées, observateur) => { 
entrées.ForEach (entrée => {
    / * Remplacement de l'espace réservé * /
    entry.target.src = entrée.target.dataset.src;
    Observer.unObServe (entrée.target);
  });
}, 
{rootmargin: "0px 0px -200px 0px"});

entry.target est l'élément observé par l'observateur. Dans notre cas, ce sont des éléments d'image. Une fois que l'espace réservé est remplacé dans l'élément d'image, nous n'avons plus besoin de l'observer, nous appelons donc la méthode unobserve de l'observateur.

Maintenant que l'observateur est prêt, il est temps de commencer à observer toutes les images en utilisant sa méthode observe :

 document.QuerySelectorall ('img'). foreach (img => {Observer.Observe (img)});

C'est ça! Nous avons paresseux pour charger l'image. Allez à la démo suivante.

Cas d'utilisation 2: Pause automatiquement la vidéo lorsque les éléments laissent la vue

Supposons que nous regardons des vidéos sur YouTube et (pour une raison quelconque), nous voulons faire défiler vers le bas pour lire les commentaires. Je ne sais pas comment vous êtes, mais je ne fais généralement pas une pause de la vidéo avant de faire cela, ce qui signifie que je manque des vidéos pendant la navigation.

Ne serait-il pas bien que la vidéo s'arrête automatiquement lorsque nous faisons défiler la vidéo? Il serait encore mieux que la vidéo reprenne la lecture lorsqu'elle rentre dans le champ de vision, il n'est donc pas nécessaire de cliquer sur le bouton Play ou Pause.

L'observateur d'intersection peut certainement le faire.

Voici notre vidéo en HTML:

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

Voici comment nous faisons une pause et jouons des vidéos pendant chaque croisement (c'est-à-dire l'entrée):

 Selt Video = Document.QuerySelector ('VIDEO');
Soit Ispaused = false; / * Indicateur pour une pause vidéo * /
Soit Observer = new intersectionObserver ((entrées, observateur) => { 
  entrées.ForEach (entrée => {
    if (entry.INTERSECTIONRATIO! = 1 &&! Video.paused) {
      video.pause (); ISPAUSED = true;
    }
    else if (ispaused) {video.play (); ispaused = false}
  });
}, {threshold: 1});
Observer.Observe (vidéo);

Avant de vous montrer comment faire une pause et lire la vidéo pendant chaque croix (c'est-à-dire l'entrée), je veux attirer votre attention sur la propriété seuil des options.

La valeur du seuil est 1. Root et rootmargin prendra les valeurs par défaut. Cela équivaut à dire: "Hé, faites-le moi savoir une fois que l'élément est entièrement visible dans la fenêtre."

Une fois qu'une croix se produit et qu'un rappel est déclenché, nous ferons une pause ou jouerons la vidéo en fonction de la logique suivante:

Je n'appelle pas unobserve pour la vidéo, donc l'observateur continue de regarder la vidéo et s'arrête à chaque fois que la vidéo part.

Cas d'utilisation 3: afficher la quantité de contenu affiché

Cela peut être expliqué et mis en œuvre de diverses manières en fonction de votre contenu et de votre façon préférée de mesurer la quantité de contenu visualisé.

Pour un exemple simple, nous observerons le dernier paragraphe de chaque message dans la liste des articles de la page. Une fois que le dernier paragraphe de l'article est entièrement visible, nous supposerons que l'article a été lu - tout comme nous pourrions dire que voir la dernière voiture d'un train équivaut à voir l'ensemble du train.

Il s'agit d'une démo qui montre deux articles sur la page, contenant chacun plusieurs paragraphes de texte.

Notre HTML simplifié ressemble à ceci:

<div></div>

<h2 id="Article">Article 1</h2>
<p></p>

<h2 id="Article">Article 2</h2>
<p></p>

Soit n = 0; / * Nombre total d'articles affichés * /
LET COUNT = Document.QuerySelector ('# count');
Soit Observer = new intersectionObserver ((entrées, observateur) => { 
  entrées.ForEach (entrée => {
    if (entry.isINTERSECTING) {
      count.textContent = `articles entièrement visualisés - $ {n}`; 
      Observer.unObServe (entrée.target);
    }
  });
}, {threshold: 1});

document.QuerySelectorAll ('Article> P: Last-Child'). ForEach (p => {Observer.Observe (P)});

Au cours de chaque croisement (c'est-à-dire que le dernier paragraphe de l'article est entièrement visible), nous incrémentons un compteur: n, qui représente le nombre total d'articles lus. Nous affichons ensuite ce numéro au-dessus de la liste d'articles.

Une fois que nous avons calculé le croisement du dernier paragraphe, nous n'avons plus besoin de l'observer, nous appelons donc unobserve dessus.

Merci pour votre participation!

Ceci est l'exemple de cet article que nous verrons ensemble. Vous avez peut-être appris à l'utiliser pour observer des éléments et déclencher des événements en fonction de leur intersection avec la fenêtre.

Autrement dit, la prudence est requise lors de l'apport de changements visuels en fonction des données croisées obtenues par le biais d'observateurs. Bien sûr, l'intersection Observer est très pratique lors de l'enregistrement des données croisées. Cependant, lorsqu'il est utilisé pour apporter des modifications à l'écran, nous devons nous assurer que les modifications ne sont pas en retard, ce qui est une possibilité car nous apportons essentiellement des modifications en fonction des données récupérées de manière asynchrone . Cela peut prendre un certain temps à charger.

Comme nous pouvons le voir, chaque entrée croisée a un ensemble d'attributs qui transmet des informations sur la croix. Dans cet article, je n'ai pas couvert toutes ces propriétés, alors assurez-vous de les vérifier.

L'image est conservée dans son format d'origine. Notez que les tables sont vides dans l'entrée et restent donc vides dans la sortie. J'ai également apporté des changements stylistiques pour améliorer la lisibilité et le flux, tout en maintenant la signification d'origine.

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!