Schnittpassungs-Beobachter-API: Echtzeitüberwachung, ob Elemente sichtbar sind

M?glicherweise wissen Sie nicht, dass JavaScript in den letzten Jahren stillschweigend viele Beobachter angesammelt hat, und der Intersection Observer ist eines der leistungsstarken Werkzeuge. Beobachter sind Objekte, die bestimmte Ereignisse in Echtzeit überwachen, genau wie Vogelbeobachter an ihrem Lieblingsort sitzen und darauf warten, dass der Vogel erscheint. Unterschiedliche Beobachter beobachten unterschiedliche Ziele.

Der erste Beobachter, mit dem ich in Kontakt kam, war der Mutationsbeobachter, der ?nderungen am Dombaum erkennt. Es war damals einzigartig, aber jetzt haben wir mehr Beobachter.

Der Intersection Observer beobachtet den "Schnittpunkt" zwischen einem Element und seinem Vorfahren Element oder dem sichtbaren Bereich der Seite (d. H. Das Ansichtsfenster) (d. H. Das Element tritt das Ansichtsfenster ein oder verl?sst sie). Es ist ein bisschen so, als würde man einen Zug an einem Bahnhof sehen. Sie k?nnen sehen, wann der Zug den Bahnhof betritt, wann er den Bahnhof verl?sst und wie lange er angehalten hat.

Es ist sehr praktisch, zu verstehen, wann ein Element in das Sichtfeld eingeben wird, wenn es verschwindet oder wie lange es vergangen ist, seit es in das Sichtfeld eingegeben wurde. Daher werden wir einige Anwendungsf?lle kennenlernen - nach dem Code, um das IntersectionObserver -Objekt über die Intersection Observer -API zu erstellen.

IntersectionObserver Schnellübersicht

Zum Zeitpunkt des Schreibens hat die Schnittbeobachter -API eine umfassende Unterstützung erhalten.

Der Browser unterstützt Daten von Caniuse, die weitere Details enth?lt. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und sp?ter unterstützt.

Desktop

Mobile/Tablet

Wenn Sie jedoch überprüfen m?chten, ob es bei der Verwendung von Intersection Observer unterstützt wird, k?nnen Sie prüfen, ob die IntersectionObserver -Eigenschaft im Fensterobjekt vorhanden ist:

 if (!! window.intersectionObserver) {}
/* oder */
if ('intersectionObserver' im Fenster) {}

Ok, schauen wir uns die Erstellung des Objekts an:

 var observer = new IntersectionObserver (Rückruf, Optionen);

Der Konstruktor des IntersectionObserver -Objekts akzeptiert zwei Parameter. Die erste ist die Rückruffunktion , die ausgeführt wird, wenn der Beobachter die Kreuzung bemerkt und einige Daten über die Kreuzung asynchron weitergibt.

Der zweite (optionale) Parameter sind Optionen , ein Objekt, das Informationen enth?lt, die definiert, was "Kreuz" ist. Wir m?chten vielleicht nicht wissen, wann das Element das Sichtfeld eingeben soll, sondern nur, wenn es vollst?ndig sichtbar ist. Dinge wie diese werden durch den Optionsparameter definiert.

Optionen haben drei Eigenschaften:

• Wurzel - das Vorfahrelement/das Ansichtsfenster, mit dem sich das beobachtete Element überqueren wird. Betrachten Sie es als den Bahnhof, an dem der Zug ihn überqueren wird.
• Wurzelmargin - Der Umfang des Wurzelelements, schrumpfen oder vergr??ern die Beobachtungsfl?che des Wurzelelements, um Kreuzover zu erkennen. Es ?hnelt der CSS -Margin -Eigenschaft.
• Schwellenwert - Ein Array von Werten (zwischen 0 und 1,0), der jeweils den Abstand darstellt, das das Element überquert oder die Wurzel überschreitet, bei der der Rückruf ausgel?st wird.

Angenommen, unsere Schwelle betr?gt 0,5. Ein Rückruf wird ausgel?st, wenn ein Element seinen halbwichtigen Schwellenwert eingeht oder überschreitet. Wenn der Wert [0.3, 0.6] betr?gt, wird ein Rückruf ausgel?st, wenn das Element seinen 30% sichtbaren Schwellenwert und seinen sichtbaren Schwellenwert von 60% überschreitet.

Das geht jetzt nur um die Theorie. Lassen Sie uns einige Demos sehen. Zun?chst einmal fauler Laden.

Verwenden Sie Fall 1: Faule Ladenbilder

Um das Lade -Tag anzuzeigen, überprüfen Sie diese Seite, da in der eingebetteten Demo das Tag nicht angezeigt wird.

CSS-Tricks hat bereits eine faule Ladevorg?nge eingeführt, die normalerweise so durchgeführt wird: Zeigen Sie einen leichten Platzhalter an. Das Bild wird an der Position des Platzhalters angezeigt und ersetzt es dann durch das erwartete Bild, wenn es eintritt (oder kurz vor dem Eingeben ist). Vertrauen Sie mir, es ist nicht faul, dies überhaupt zu implementieren - das hei?t, bis wir einen nativen Code verwenden k?nnen.

Wir werden den gleichen Mechanismus anwenden. Erstens haben wir eine Reihe von Bildern und definieren ein Platzhalterbild, das ursprünglich angezeigt wird. Wir verwenden ein Datenattribut, um die URL des zu angezeigten Originalbildes zu tragen, das das zu geladene Bild definiert, wenn das tats?chliche Bild in das Ansichtsfeld eingeht.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg" class="lazy" alt="Ein paar funktionale Verwendungen für den überschneidungsbeobachter, um zu wissen, wann ein Element in Sicht ist"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg" class="lazy" alt="Ein paar funktionale Verwendungen für den überschneidungsbeobachter, um zu wissen, wann ein Element in Sicht ist"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg" class="lazy" alt="Ein paar funktionale Verwendungen für den überschneidungsbeobachter, um zu wissen, wann ein Element in Sicht ist">

Der Rest sind Skripte.

 Lassen Sie Observer = New IntersectionObserver (
(Eintr?ge, Beobachter) => { 
  Eintr?ge.foreach (Eintrag => {
    /* Handle jedes Kreuz hier*/////
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

Die obige Rückruffunktion ist eine Pfeilfunktion (obwohl Sie eine normale Funktion verwenden k?nnen).

Die Rückruffunktion empf?ngt zwei Parameter: eine Reihe von Eintr?gen , die Informationen zu jeder Kreuzung enthalten; und der Beobachter selbst. Diese Eintr?ge k?nnen gefiltert oder durchschleifen und dann die gewünschten Kreuzeintr?ge verarbeiten. Was die Optionen betrifft, gebe ich nur den RootMargin -Wert an, sodass die Root- und Schwellenwerteigenschaften ihre Standardwerte annehmen k?nnen.

Der Standardwert des Roots ist das Ansichtsfenster, und der Standardwert des Schwellenwerts betr?gt 0 - dies kann grob interpretiert werden, als "mich in dem Moment benachrichtigt, in dem das Element im Ansichtsfenster erscheint!"

Seltsamerweise habe ich Rootmargin verwendet, um den Boden des Beobachtungsbereichs des Ansichtsfensatzes um 200 Pixel zu verringern. Wir tun dies normalerweise nicht im faulen Laden. Stattdessen k?nnen wir die Margen erh?hen oder es nicht bestimmen. In diesem Fall reduzieren wir jedoch normalerweise keine Margen. Ich mache das nur, weil ich das Originalbild demonstrieren m?chte, das an der Schwelle des Beobachtungsbereichs geladen ist. Andernfalls werden alle Operationen au?er Sicht auftreten.

Wenn sich das Bild den Betrachtungsbereich des Ansichtsfensters überschneidet (200 Pixel über dem Boden in der Demonstration), ersetzen wir das Platzhalterbild durch das tats?chliche Bild.

 Lassen Sie Observer = New IntersectionObserver (
(Eintr?ge, Beobachter) => { 
Eintr?ge.foreach (Eintrag => {
    /* Platzhalterersatz*///
    Eintrag.Target.src = Eintrag.Target.Dataset.src;
    Observer.unobserve (Eintrag.Target);
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

entry.target ist das vom Beobachter beobachtete Element. In unserem Fall sind dies Bildelemente. Sobald der Platzhalter im Bildelement ersetzt wurde, müssen wir ihn nicht mehr beobachten, sodass wir die unobserve -Methode des Beobachters darauf nennen.

Nachdem der Beobachter bereit ist, ist es Zeit, alle Bilder mit seiner observe zu beobachten:

 document.querySelectorAll ('img'). foreach (img => {observer.observe (img)});

Das war's! Wir haben faul, das Bild zu laden. Gehen Sie zur n?chsten Demo.

Anwendungsfall 2: Pause Videos automatisch, wenn Elemente die Ansicht hinterlassen

Angenommen, wir sehen uns Videos auf YouTube an und (aus welchem ??Grund) m?chten wir nach unten scrollen, um die Kommentare zu lesen. Ich wei? nicht, wie es Ihnen geht, aber ich pausiere das Video normalerweise nicht vor, da ich beim Surfen einige Videos vermisse.

W?re es nicht sch?n, wenn das Video automatisch innehalten würde, wenn wir aus dem Video wegrollen? Es w?re sogar noch besser, wenn das Video das Spielen wieder aufnimmt, wenn es wieder in das Sichtfeld eintritt, sodass Sie nicht auf die Schaltfl?che Spielen oder Pause klicken müssen.

Intersection Observer kann dies sicherlich tun.

Hier ist unser Video in HTML:

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

So halten wir w?hrend jedes Crossover (d. H. Eintrag) innehalten und Videos spielen:

 lass Video = document.querySelector ('Video');
lass ispauded = false; /* Flag für automatische Pause von Video*/
Lassen Sie Observer = New IntersectionObserver ((Eintr?ge, Beobachter) => { 
  Eintr?ge.foreach (Eintrag => {
    if (Eintrag.intersectionRatio! = 1 &&! Video.pause) {
      Video.pause (); ispauded = true;
    }
    sonst if (iSpauded) {Video.play (); ispauded = false}
  });
}, {Schwelle: 1});
Observer.observe (Video);

Bevor ich Ihnen zeige, wie Sie das Video w?hrend jedes Kreuzes (d. H. Eingabe) innehalten und abspielen, m?chte ich Ihre Aufmerksamkeit auf die Schwellenwerteigenschaft von Optionen lenken.

Der Wert des Schwellenwerts betr?gt 1. Root und RootMargin nimmt die Standardwerte an. Dies ist gleichbedeutend mit der Aussage: "Hey, lass es mich wissen, sobald das Element im Ansichtsfenster vollst?ndig sichtbar ist."

Sobald ein Kreuz auftritt und ein Rückruf ausgel?st wird, werden wir das Video gem?? der folgenden Logik innehalten oder abspielen:

Ich rufe unobserve nicht für das Video an, so dass der Beobachter das Video immer wieder ansieht und jedes Mal eine Pause einl?sst, wenn das Video die Ansichten verl?sst.

Anwendungsfall 3: Anzeigen, wie viel Inhalt angezeigt wurde

Dies kann auf verschiedene Weise erkl?rt und implementiert werden, basierend auf Ihren Inhalten und Ihrer bevorzugten M?glichkeit, zu messen, wie viel Inhalt angezeigt wurde.

Für ein einfaches Beispiel werden wir den letzten Absatz jedes Beitrags in der Liste der Beitr?ge auf der Seite beobachten. Sobald der letzte Absatz des Artikels vollst?ndig sichtbar ist, werden wir davon ausgehen, dass der Artikel gelesen wurde - genau wie wir sagen k?nnten, dass das Sehen des letzten Fahrzeugs eines Zuges gleichbedeutend mit dem gesamten Zug ist.

Dies ist eine Demo, die zwei Artikel auf der Seite zeigt, die jeweils mehrere Textabs?tze enthalten.

Unsere vereinfachte HTML sieht so aus:

<div></div>

<h2>Artikel 1</h2>
<p></p>

<h2>Artikel 2</h2>
<p></p>

sei n = 0; /* Gesamtzahl der angezeigten Artikel*/
lass count = document.querySelector ('#count');
Lassen Sie Observer = New IntersectionObserver ((Eintr?ge, Beobachter) => { 
  Eintr?ge.foreach (Eintrag => {
    if (Eintrag. Issintersecting) {
      count.textContent = `artikel vollst?ndig angezeigt - $ {n}`; 
      Observer.unobserve (Eintrag.Target);
    }
  });
}, {Schwelle: 1});

document.querySelectorAll ('Artikel> p: letztes Kind'). foreach (p => {observer.observe (p)});

W?hrend jeder Crossover (d. H. Der letzte Absatz des Artikels ist vollst?ndig sichtbar) erh?hen wir einen Z?hler: n, was die Gesamtzahl der gelesenen Artikel darstellt. Anschlie?end zeigen wir diese Nummer über der Artikelliste an.

Sobald wir den übergang des letzten Absatzes berechnet haben, müssen wir ihn nicht mehr beobachten, also nennen wir unobserve darauf.

Vielen Dank für Ihre Teilnahme!

Dies ist das Beispiel in diesem Artikel, den wir gemeinsam anzeigen werden. M?glicherweise haben Sie gelernt, wie man es verwendet, um Elemente zu beobachten und Ereignisse auf der Grundlage ihrer Kreuzung mit dem Ansichtsfenster auszul?sen.

Das hei?t, es ist Vorsicht erforderlich, wenn visuelle ?nderungen auf der Grundlage von Kreuzdaten durch Beobachter vorgenommen werden. Natürlich ist der Schnittbeobachter bei der Aufzeichnung von Cross-Data sehr bequem. Wenn es jedoch verwendet wird, um ?nderungen auf dem Bildschirm vorzunehmen, müssen wir sicherstellen, dass die ?nderungen nicht verz?gern, was eine M?glichkeit ist, da wir im Grunde genommen ?nderungen anhand von Daten vornehmen, die asynchron abgerufen werden. Dies kann einige Zeit dauern, um zu laden.

Wie wir sehen k?nnen, hat jeder Kreuzeintrag einen Attributsatz, der Informationen über das Kreuz vermittelt. In diesem Beitrag habe ich nicht alle diese Eigenschaften behandelt, also schauen Sie sich sie unbedingt an.

Das Bild ist in seinem ursprünglichen Format erhalten. Beachten Sie, dass die Tabellen im Eingang leer sind und somit im Ausgang leer bleiben. Ich habe auch stilistische ?nderungen vorgenommen, um die Lesbarkeit und den Fluss zu verbessern und gleichzeitig die ursprüngliche Bedeutung beizubehalten.

Das obige ist der detaillierte Inhalt vonEin paar funktionale Verwendungen für den Intersection -Beobachter, um zu wissen, wann ein Element in Sicht ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!