Schnittpunktbeobachter Spurelemente in Ansicht blättern

Der "Intersection Observer" bietet eine Möglichkeit, Änderungen in der Überschneidung (Überlappung) von Elementen asynchron zu beobachten. Dies kann sich auf andere Elemente oder das Ansichtsfenster beziehen. In diesem Artikel werfen wir einen Blick auf einige Demos und diskutieren die Relevanz, die Intersection Observer zukünftig für Webentwickler spielen wird. Ich gebe auch Codebeispiele, um Ihnen den Einstieg in die nächtlichen Experimentiersitzungen zu erleichtern. Lass uns eintauchen!

Was kann der Intersection Observer??

Das IntersectionObserver Mit der API können Sie eine Rückruffunktion registrieren, die ausgeführt wird, wenn ein zu überwachendes Element ein anderes Element oder den Viewport betritt oder verlässt.

In diesem W3C-Erklärerdokument zu GitHub gibt es viele Ideen und Vorschläge. Intersection Observer kann jedoch hilfreich sein, um Features wie die folgenden aufzubauen:

Faules Laden
Unendliches Scrollen
Sichtbarkeit / Ort der Berichterstellung
Animationen ausführen

In dieser Demo von Dan Callahan erfahren Sie, worüber wir sprechen:

Um mit anzufangen IntersectionObserver Lassen Sie uns die erforderlichen Codierungsschritte erkunden. Sie können immer sicherstellen, dass Ihre beabsichtigten Browser / Geräte die IO-API unterstützen, indem Sie auf caniuse verweisen. Wir beginnen damit, einen Beobachter zu erstellen und zu diskutieren, wie er zur Überwachung von Komponenten verwendet werden kann.

Einen Beobachter erstellen

IntersectionObserver Beginnt mit einer Gruppe von Optionen, die als Objektliteral definiert und als Argument an Ihr definiertes Observer-Objekt übergeben wird.

let options = root: null, // relativ zum Dokument-Ansichtsfenster rootMargin: '0px', // Rand um root. Die Werte ähneln der Eigenschaft css. Einheitenlose Werte nicht zulässig Schwelle: 1.0 // sichtbare Menge des Elements, die in Bezug auf den Stamm angezeigt wird; let observer = new IntersectionObserver (Rückruf, Optionen);

Diese Beobachteroptionen in den Zeilen 2 bis 4 bestimmen einige wichtige Details, wenn die Sichtbarkeit eines Zielelements in Bezug auf die Wurzel erkannt werden soll. Das erste Argument des Observer-Objekts (letzte Zeile) steht für einen Callback (Funktion), der ausgeführt wird, wenn der Observer die Anforderungen erfüllt. Das zweite Argument bezieht sich auf unser Objektliteral, das die Optionen des Beobachters enthält, und akzeptiert die folgenden Eigenschaften:

Wurzel: Das Element, mit dem Sie die Kreuzung testen möchten. Ein Wert von Null bezieht sich auf den Darstellungsbereich des Browsers. Sie können auch DOM-Auswahlmethoden wie übergeben document.querySelector ('# mytargetobject').
rootMargin: Wenn Sie die effektive Größe des Wurzelelements vergrößern oder verkleinern müssen, bevor Sie Schnittpunkte berechnen. Diese übergebenen Werte ähneln der CSS Spanne Eigentum. Wenn die Wurzel Element angegeben ist, können die Werte Prozent sein.
Schwelle: Entweder eine einzelne Zahl oder ein Zahlenfeld, das angibt, wie viel Prozent der Sichtbarkeit des Ziels den Callback des Beobachters auslösen. Ein Wert von 1,0 bedeutet, dass der Schwellenwert nicht als bestanden gilt, bis jedes Pixel sichtbar ist, während 0 bedeutet, dass das Element vollständig nicht angezeigt wird.

Wie bereits erwähnt, behandeln Sie das Rückrufargument, indem Sie eine Funktion erstellen, die benutzerdefinierte Logik enthält, die auf den Anforderungen Ihres Projekts basiert. Diese Logik wird immer dann ausgeführt, wenn ein beobachtetes Element in Bezug auf das definierte Wurzelelement sichtbar ist.

Funktion onChange (ändert, Beobachter) // Logik geht hier let Observer = new IntersectionObserver (onChange, Optionen);

Die Logik in der Funktion Ihres Beobachters kann Ereignisse wie das Laden von Bildern, das Hinzufügen / Entfernen von Klassen oder das Steuern der Sichtbarkeit sein. Sie haben jedoch die Wahl, was von innen aus getan werden kann, je nach Ihren Bedürfnissen und Zielen.

Jedes Mal, wenn der Beobachter eine Änderung feststellt, a Änderungen Ereignis wird gemeldet (eine Art wie ein Funktion() Melden eines Ereignisobjekts) aus dem Observer-Callback. Durch die Verwendung dieses ausgelösten Ereignisses können wir die Sichtbarkeit unseres Elements in Bezug auf die Wurzel überprüfen, bevor Sie eine zusätzliche Logik ausführen, indem Sie Eigenschaften auf der Datenbank erkennen Veränderung Veranstaltung. Einige Entwickler werden ersetzen Änderungen mit dem wort Einträge Stattdessen funktionieren beide Ansätze gleich.

function onChange (wechselt, Beobachter) changes.forEach (change => if (change.intersectionRatio> 0) // Ihre Beobachterlogik);

In dieser Schleife heißt es: „Prüfen Sie bei jeder erkannten Änderung, ob das Zielelement im Verhältnis zur definierten Wurzel aktuell sichtbar ist (größer als 0).“ Das Schnittverhältnis unterstützt die Meldung, wie viel des Elements mit einem Wert zwischen 0,0 sichtbar ist (nicht sichtbar) und 1,0 (vollständig sichtbar). Sie können sich das Schnittverhältnis wie das Schwelle Eigenschaft, die in den Optionen Ihres Beobachters definiert ist.

Die Beobachtungsmethode

Bisher haben wir ein Optionsobjekt, eine Rückruffunktion und ein Beobachterobjekt erstellt, aber wir haben immer noch nichts zu beobachten. Hier kommt die Beobachtungsmethode zum Einsatz.

let images = document.querySelectorAll ('img'); images.forEach (img => observer.observe (img));

Diese Methode fügt der Gruppe von Zielelementen, die vom überwacht werden, ein Element hinzu IntersectionObserver. In diesem Beispiel beobachte ich jedes Bild auf der Seite anhand der Ergebnisse von Bilder Wahlreferenz. Das beobachten() Die Methode überwacht ein Ziel weiter, bis eine der folgenden Bedingungen eintritt: unbeobachtung () oder trennen() Methoden werden zusammen mit dem gelöschten Zielelement oder Kreuzungswurzel aufgerufen. Wenn Sie ein Element nicht mehr beobachten müssen, rufen Sie am besten an unbeobachtung () und übergeben Sie Ihr Ziel als Argument.

Stützbedingung

Wenn Sie die Unterstützung dieser API testen müssen, können Sie alles in eine ob/sonst Bedingungsanweisung wie folgt:

if ('IntersectionObserver' im Fenster) // unterstützt else // nicht unterstützt

Da sich die Intersection Observer API noch in einem Entwurfsstadium befindet, empfehlen wir Ihnen, das Feature zu erkennen Fenster Objekt, oder Sie können auch Polyfills finden, wenn Sie möchten.

Live-Beispiele

Die folgende Demo enthält den gesamten Code, den ich bis jetzt besprochen habe, mit einigen zusätzlichen Verbesserungen. Diese Demo lazy lädt Bilder, wenn sie 50% ihrer Sichtbarkeit in Bezug auf das Ansichtsfenster anzeigen.

Sie können ein unterschiedliches Verhalten feststellen, wenn es sich um das handelt Bild Elemente im Vergleich zu den img Elemente in Chrome und Firefox. Beide Browser werden geladen Bild Elemente perfekt, aber Bild ignoriert unsere Schwelle, selbst wenn absolute Größenbeschränkungen definiert sind. Sie scheinen zu laden, wenn sie etwa 10% im Vergleich zu der in der Demo definierten Schwelle von 50% sind. Hinterlassen Sie einen Kommentar, wenn Sie diese Seltsamkeit bemerken oder Probleme mit haben IntersectionObserver und Bild speziell.

Hier ist eine weitere Demo, die ein unendliches Bildlauf-Szenario erstellt, das faul Bilder mit Ajax lädt, um Bilder nach Bedarf zu laden.

In diesem Szenario füge ich ein Sentinel als festes Ziel in das DOM ein. Dieses Sentinel wird neben dem letzten Element des Endlos-Scrollers platziert. Sobald das Sentinel angezeigt wird, lädt der Callback die Daten, erstellt die nächsten Elemente, fügt sie dem DOM hinzu und positioniert das Sentinel neu. Wenn Sie den Sentinel ordnungsgemäß recyceln, werden keine weiteren Anrufe an beobachten() sind erforderlich. Hier ein großartiges Diagramm des Google Developer-Teams, das diesen Ansatz visuell erläutert.

Ein Hinweis zu den Bildern

Wenn ein img Element mit einer Einschränkung von Max-Breite: 100% wird beobachtet, wird es nicht geladen. Das bedeutet, dass Bilder, die in einer faulen Art und Weise geladen werden, im CSS definierte Einschränkungen oder Inline-Definitionen haben müssen Bild Elemente, denen keine Einschränkungen unterliegen, besteht darin, dass die Größe null ist, bevor der Inhalt geladen wird. Dies bedeutet, dass sie alle gleichzeitig das Ansichtsfenster schneiden, während Sie scrollen. Ich vermute getBoundingClientRect () Dies ist ein Teil des Grunds, da dies eine der Hauptmethoden ist, um die Koordinaten und Abhängigkeiten eines Elements zu erhalten.

Fazit

Benutzt du IntersectionObserver In dieser Minute in deiner eigenen Arbeit? Freuen Sie sich auf dieses Feature und die damit verbundenen Möglichkeiten? Könnte IntersectionObserver ersetzen Sie die Notwendigkeit für ereignisbasierte Funktionen wie Position: klebrig? Ich persönlich denke, dass diese neue API eine solide Ergänzung zu unseren Spezifikationen ist, und ich freue mich sehr auf das weitere Wachstum in den nächsten Jahren.

Ich habe ein paar nützliche Links hinzugefügt und möchte Sie dazu ermutigen, in Ihrer Freizeit tiefer zu tauchen. Jeder Link hilft Ihnen, die Funktionsweise und Funktionsweise dieser neuen API besser zu verstehen. Wenn Sie Tipps oder Tricks für andere Leser haben, lassen Sie sie in den Kommentaren unten. Wie immer viel Spaß beim Codieren!