Ein paar funktionale Verwendungen für den Intersection -Beobachter, um zu wissen, wann ein Element in Sicht ist

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/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="Ein paar funktionale Verwendungen für den Überschneidungsbeobachter, um zu wissen, wann ein Element in Sicht ist"><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="Ein paar funktionale Verwendungen für den Überschneidungsbeobachter, um zu wissen, wann ein Element in Sicht ist"><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="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 id="Artikel">Artikel 1</h2>
<p></p>

<h2 id="Artikel">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!