Einheimische unendliche Scrollen mit der IntersectionObserver -API

Intersection Observer API: Effizientes DOM -Element -Sichtbarkeit

Intersection Observer API ist eine aufkommende klientseitige JavaScript-API zur effizienten Überwachung der Sichtbarkeit bestimmter DOM-Elemente, die für Funktionen wie fauler Laden, unendliches Scrollen und Anzeigensichtbarkeit nützlich ist.

Browserunterstützung und Polyfill

Diese API ist relativ neu und bietet derzeit nur begrenzte Browser -Unterstützung, einschließlich Chrome Desktop Edition 51, Chrome Android Edition 51, Android WebView 51, Opera 38 und Opera Android Edition 38. Auf GitHub wird jedoch eine Polyfill in der Entwicklung bereitgestellt, sodass Entwickler sofort Intersektionsbeobachter verwenden können.

Infinite Scrolling Implementierungshandbuch

Dieser Artikel enthält detaillierte Beschreibungen, wie die IntersectionObserver -API und die Polyfill verwendet werden, um den unbegrenzten Benutzererfahrungsmodus zu erreichen, einschließlich Seiteneinstellungen, Skriptkreiber und Sentinel -Elementverwaltung. Die Anleitung enthält ES6/ES2015 -Funktionen wie Versprechen, Vorlagenzeichenfolgen und Pfeilfunktionen.

Kernkonzept: Sentinel -Element

Die Kernidee der Implementierung von unendlichem Scrollen besteht darin, ein Element am unteren Rand der Liste als "Sentinel" zu verwenden, das mehr Inhalte auslöst, wenn sich das Browserfenster am unteren Rand der Seite nähert.

Seiteneinstellungen (HTML)

Die Seitenkörperstruktur ist eine einfache Liste:

<code class="language-html"><ul class="listview"></ul></code>

Um den Code zu vereinfachen, werden sowohl die Anfangslistenelemente als auch die nachfolgenden Seiten über JavaScript dynamisch geladen. Wir geben auch Polyfill ein und zeigen die Eingabeaufforderung zur Nachricht an, wenn die API sie nicht unterstützt:

<code class="language-html"><div class="polyfill-notice">The polyfill is in use</div>
</code>

CSS -Stil wird verwendet, um das Listenansichtslayout und die Unterstützung von Eingabeaufforderungen zu unterstützen (Einzelheiten finden Sie im Stilblatt).

Skript -Erstellung (JavaScript)

zunächst ein IntersectionObserver Objekt:

instanziieren

<code class="language-javascript">sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1});</code>

threshold: 1 bedeutet, dass der Ereignishörer nur ausgelöst wird, wenn sich das Element vollständig im Fenster befindet. Sentinel -Elemente sind während der Demonstration mit orangefarbenen Grenzen gekennzeichnet.

Der Ereignishörer

führt Vorgänge aus, z. Die nextPage -Methode gibt ein Versprechen zurück, das angibt, wann diese Operationen abgeschlossen sind. Danach können wir das neue Sentinel -Element auswählen und die Lastanzeige ausschalten: nextPage

<code class="language-javascript">sentinelListener = function(entries) {
  sentinel.unset();
  listView.classList.add('loading');
  nextPage().then(() => {
    updateSentinel();
    listView.classList.remove('loading');
  });
};</code>

Methode Wählen Sie den neuen Sentinel aus und wählen Sie das erste Element der neu geladenen Seite: updateSentinel

<code class="language-javascript">updateSentinel = function() {
  sentinel.set(listView.children[listView.children.length - pageSize]);
};</code>

Der Rest des Codes implementiert hauptsächlich die

-Funktion. Wenn das von nextPage (simulierte Netzwerkanforderung) zurückgegebene Versprechen behoben ist, wird das bereitgestellte Projektobjekt in HTML gerendert und zum Ende der Liste hinzugefügt. loadNextPage()

Weitere Lesen

Weitere Dokumentation zu API und ihren Prinzipien:

intersectionObservers sehen
• in Sicht
Intersection -Beobachter erklärten
mdn - intersectionObserver api

Schnittbeobachter API FAQ

(Der FAQ -Abschnitt wird hier weggelassen, da der Originaltext eine vollständige und klare Antwort enthält.)

Das obige ist der detaillierte Inhalt vonEinheimische unendliche Scrollen mit der IntersectionObserver -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!