Zusammenfassung

  • Der erste öffentliche W3C-Arbeitsentwurf vom 14. September 2017 beschrieb asynchrone Meldungen, wenn ein Zielelement eine Schnittschwelle gegenüber einem Container oder dem sichtbaren Fenster überschreitet.
  • Lange Seiten konnten Bilder und andere Inhalte vorbereiten, ohne bei jedem Scrollschritt das Layout erneut abzufragen. Die Anwendung entscheidet weiterhin, welche Arbeit auf die Meldung folgt.

Der Lagerarbeiter war neunmal hinten im Gang. Die Kiste stand immer noch nicht bereit. Beim zehnten Anlauf schlägt die Kollegin am Tor eine Klingel vor. Die Kiste wird dadurch nicht schneller transportiert. Aber der Arbeiter kann etwas anderes tun, bis sie ankommt. Auf langen Webseiten wurde derselbe Umweg in JavaScript gefahren: Ein Programm wollte wissen, ob ein entferntes Bild in die Nähe des sichtbaren Bereichs gerückt war, und fragte den Browser immer wieder nach Koordinaten.

Der erste öffentliche Arbeitsentwurf des W3C vom 14. September 2017 beschrieb die Kosten. Explizite Positionsabfragen konnten Neuberechnungen von Stil und Layout auslösen. Ständiges Nachsehen in Scroll-Handlern konnte eine flüssige Bewegung stören. Der Entwurf nannte verzögertes Laden, die teilweise Darstellung sehr langer Listen und die Bestimmung, ob ein Element mit einem sichtbaren Bereich überlappt. Er versprach keine allgemeingültige Prozentzahl an eingesparter Energie. Er schlug einen anderen Kommunikationsweg vor.

Der beobachtete Gegenstand heißt target. Die root ist der Vergleichsbereich, entweder ein benannter Container oder ohne ausdrückliche Angabe das obere sichtbare Fenster. Ein IntersectionObserver bekommt eine Rückruffunktion und Optionen. Mit observe(target) nimmt die Seite ein Element in die Überwachung auf; mit unobserve(target) entlässt sie genau dieses Element; mit disconnect() beendet sie alle Beobachtungen des Objekts. Überschreitet die geometrische Beziehung eine vereinbarte Schwelle, erhält die Funktion Einträge. Das Tor meldet die Ankunft, statt einen Kollegen alle paar Sekunden ins Regal zu schicken.

Die Schwelle muss nicht genau am Rand des sichtbaren Fensters liegen. rootMargin vergrößert oder verkleinert das Vergleichsrechteck. Wer ein Bild vorbereiten will, bevor es auf dem Bildschirm erscheint, kann die Nachricht früher auslösen. threshold benennt die Schnittanteile, bei denen eine Meldung fällig wird. Ein Eintrag enthält Ziel, Zeit, Begrenzungs- und Schnittrechteck sowie intersectionRatio. Eine Fotostrecke braucht vielleicht Vorlauf für den Download. Eine Liste kann warten, bis ein Eintrag näher ist. Der Browser misst; die Redaktion legt den Einsatzplan fest.

Eine Meldung ist noch kein Ladevorgang. Die Rückruffunktion kann eine Datei anfordern, eine Karte sichtbar machen, Listenelemente erzeugen oder nur einen Zustand speichern. Der Entwurf erklärte unobserve() gerade mit dem einmaligen verzögerten Laden: Ist das Ziel sichtbar geworden und die Aufgabe erledigt, lässt sich die Beobachtung beenden. Niemand verlangt dauernd neue Ankunftsmeldungen für eine Kiste, die längst ausgepackt ist.

Asynchronität gehörte zum Entwurf. Die beschriebenen Aufgaben verlangten laut dem W3C-Text keine harte Reaktionszeit bis auf die Millisekunde. Eine geringfügig spätere Nachricht war oft sinnvoller als synchrones Layout-Lesen bei jeder Scrollbewegung. Auch eine pixelgenaue Aussage darüber, was nach Filtern und Zusammensetzung tatsächlich auf dem Ausgabegerät erschien, war kein Designziel. Die API berichtet geometrische Verhältnisse nach ihren Regeln. Ob ein Mensch das Bild angesehen oder verstanden hat, steht auf einem anderen Lieferschein.

Der zuletzt veröffentlichte W3C-Entwurf bewahrt den Kern: Ziele werden gegenüber einer root gemessen; Änderungen an Schwellen werden als Einträge asynchron mitgeteilt. Die offizielle Publikationsgeschichte beginnt mit dem ersten Entwurf im September 2017 und reicht mit weiteren Working Drafts bis Oktober 2023. Diese Daten ordnen Dokumente, keine Browser-Marktanteile. Der jüngste dort aufgeführte Text ist weiterhin ein Working Draft.

Besonders nützlich ist die gemeinsame Schnittstelle, wenn eine Seite viele entfernte Gegenstände enthält. Ein Katalog kann zahlreiche Karten mit einem Beobachter verfolgen und nur die nächsten vorbereiten. Ein Bericht kann das nächste Foto etwas vor seinem Auftritt holen. Eine Liste kann eine erledigte Karte aus der Beobachtung nehmen. Früher durfte jedes Team seine eigene Schleife aus Scroll-Ereignissen, Positionsmessungen und Zeitpunkten bauen. Jetzt gibt es ein gemeinsames Signal, während Prioritäten und Netzwerkkosten weiterhin den Anwendungen gehören.

Mit dem Signal lässt sich keine Aufmerksamkeit beweisen. intersectionRatio ist das Verhältnis zweier berechneter Flächen. Ein Bild kann im Fenster liegen, während der Leser gedanklich schon beim nächsten Termin ist. Die Lagerklingel beweist, dass die Kiste am Tor angekommen ist, nicht dass der Kunde den Inhalt gut findet. Gerade diese genaue Grenze macht die Information belastbar: Sie beantwortet eine technische Frage und behauptet keine psychologische.

Intersection Observer ist eine kleine Verschiebung mit großer praktischer Eleganz. Die Seite muss nicht ständig für die Nachricht bezahlen, dass ein Bild noch weit weg ist. Sie lässt eine Grenze eintragen und wartet auf die Meldung. Der Lagerarbeiter kann derweil die Kisten bearbeiten, die tatsächlich vor ihm stehen.