Advertisement
  1. Web Design
  2. jQuery

Erstellen einer unendlichen Bildlauferfahrung mit der Verlaufs-Web-API

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial werden wir unsere Fähigkeiten in der Verlaufs-Web-API verbessern. Wir werden ein UX-Muster im Web erstellen, das gleichermaßen geliebt und verabscheut wird: unendliches Scrollen.

Unendliches Scrollen ist ein Schnittstellenmuster, das neue Inhalte lädt, wenn wir das Ende einer bestimmten Webseite erreichen. Durch unendliches Scrollen kann das Engagement der Benutzer erhalten bleiben, wenn es sorgfältig implementiert wird. Einige der besten Beispiele sind soziale Plattformen wie Facebook, Twitter und Pinterest.

Es ist jedoch erwähnenswert, dass wir die Dinge, die wir in unserem vorherigen Tutorial Schöne, reibungslose Seitenübergänge mit der Verlaufs-Web-API erstellt haben, erheblich verbessern. In diesem Tutorial werden wir uns mit der Bildlaufinteraktion der Benutzer befassen, die sehr häufig auftreten kann. Wenn wir mit unserem Code nicht vorsichtig sind, wirkt sich dies wiederum nachteilig auf die Leistung unserer Website aus. Stellen Sie sicher, dass Sie die vorherigen Tutorials gelesen haben, bevor Sie dieses versuchen, um ein angemessenes Verständnis dafür zu erhalten, was wir tun.

  • WordPress
    Wie man SmoothState.js in ein WordPress-Theme integriert
    Thoriq Firdaus
  • JavaScript
    Schöne, reibungslose Seitenübergänge mit der History-Web-API
    Thoriq Firdaus

Wenn Sie von der Idee einer Herausforderung begeistert sind, schnallen Sie sich an, bereiten Sie sich vor und legen Sie los!

Erstellen der Demo-Website

Unsere Seite ist ein statischer Blog. Sie können es aus einfachem HTML erstellen oder einen statischen Site-Generator wie Jekyll, Middleman oder Hexo verwenden. Unsere Demo für dieses Tutorial sieht wie folgt aus:

The website postThe website postThe website post
Schlichtes altes Weiß.

In Bezug auf die HTML-Struktur gibt es einige Dinge, die Ihre Aufmerksamkeit erfordern.

  1. Wie Sie dem obigen Codeausschnitt entnehmen können, sollte der Artikel in ein HTML-Element mit einer eindeutigen ID eingeschlossen werden. Sie können ein div- oder ein section-Element verwenden, ohne die id des Elements zu beschränken.
  2. Außerdem müssen Sie im Artikel selbst ein data-article-id-Attribut hinzufügen, das die entsprechende id-Nummer des Artikels enthält.

Fühlen Sie sich frei, in Bezug auf die Website-Stile zu erläutern; Machen Sie es bunter, ansprechender oder fügen Sie mehr Inhalte hinzu.

Laden Sie das JavaScript

Laden Sie zunächst die folgenden JavaScript-Bibliotheken in der folgenden Reihenfolge auf jede Seite Ihres Blogs.

  • jquery.js: Die Bibliothek, mit der wir Elemente auswählen, neuen Inhalt anhängen, neue Klassen hinzufügen und AJAX-Anforderungen ausführen.
  • history.js: Eine Polyfüllung, die die native Verlaufs-API der Browser unterlegt.

Unser Custom jQuery Plugin

Zusätzlich zu diesen beiden müssen wir unsere eigene JavaScript-Datei laden, in die wir die Skripte schreiben können, um ein unendliches Scrollen durchzuführen. Der Ansatz besteht darin, unser JavaScript in ein jQuery-Plugin zu packen, anstatt es direkt zu schreiben, wie wir es in den vorherigen Tutorials getan haben.

Wir werden das Plugin mit jQuery Plugin Boilerplate starten. Dies ist insofern mit dem HTML5-Boilerplate vergleichbar, als es eine Sammlung von Vorlagen, Mustern und Best Practices zum Erstellen eines jQuery-Plugins bereitstellt.

Laden Sie das Boilerplate herunter, legen Sie es in dem Verzeichnis Ihrer Website ab, in dem sich alle JavaScript-Dateien befinden (z. B. /assets/js/), und benennen Sie die Datei in "keepcrolling.jquery.js" um. (Dieser Name wurde von Dory von Finding Nemo und ihrer berühmten Linie "Keep Swimming" inspiriert).

Das Plugin ermöglicht es uns, Flexibilität mit Optionen oder Einstellungen einzuführen.

Beobachtung der jQuery-Plugin-Struktur

Das Schreiben eines jQuery-Plugins erfordert eine etwas andere Denkweise. Daher werden wir zunächst untersuchen, wie unser jQuery-Plugin aufgebaut ist, bevor wir Code hinzufügen. Wie Sie unten sehen können, habe ich den Code in vier Abschnitte unterteilt:

  1. Im ersten Abschnitt des Codes geben wir unseren Plugin-Namen keepScrolling mit "camel case" gemäß den allgemeinen JavaScript-Namenskonventionen an. Wir haben auch eine Variable, defaults-Einstellungen, die die Standardeinstellungen des Plugins enthält.
  2. Dann haben wir die Hauptfunktion des Plugins, Plugin(). Diese Funktion kann mit einem "Konstruktor" verglichen werden, der in diesem Fall das Plugin initialisiert und die Standardeinstellungen mit den beim Instanziieren des Plugins übergebenen Einstellungen zusammenführt.
  3. Im dritten Abschnitt werden wir unsere eigenen Funktionen zusammenstellen, um die unendliche Bildlauffunktionalität zu erfüllen.
  4. Schließlich ist der vierte Abschnitt einer, der das Ganze in ein jQuery-Plugin einwickelt.

Mit allen diesen Sätzen können wir jetzt unser JavaScript erstellen. Zunächst definieren wir die Standardoptionen unseres Plugins.

Die Optionen

Wie Sie oben sehen können, haben wir drei Optionen festgelegt:

  • floor: Ein ID-Selektor wie #floor oder #footer, den wir als das Ende der Website oder den Inhalt betrachten. In der Regel ist dies die Fußzeile der Site.
  • article: Ein Klassenselektor, der den Artikel umschließt.
  • data: Da wir keinen Zugriff auf externe APIs haben (unsere Website ist statisch), müssen wir eine Sammlung von Artikeldaten wie Artikel-URL, ID und Titel im JSON-Format als Optionsargument übergeben.

Die Funktionen

Hier haben wir die init(). In dieser Funktion werden wir eine Reihe von Funktionen hinzufügen, die sofort während der Site-Initialisierung ausgeführt werden müssen. Zum Beispiel wählen wir die Site-Etage aus.

Es gibt auch einige Funktionen, die wir außerhalb der Initialisierung ausführen werden. Wir fügen diese Funktionen hinzu, um sie zu erstellen, und fügen sie nach der init-Funktion hinzu.

Die ersten Funktionen, die wir schreiben, werden verwendet, um ein "Ding" abzurufen oder zurückzugeben. Alles aus einem String, einem Objekt oder einer Zahl, das für alle anderen Funktionen im Plugin wiederverwendbar ist. Dazu gehören Dinge zu:

Holen Sie sich alle Artikel auf der Seite:

Holen Sie sich die Artikeladresse. In WordPress ist dies im Volksmund als "Post Slug" bekannt.

Holen Sie sich die nächste Artikel-ID und Adresse zum Abrufen.

Im Folgenden sind die Utility-Funktionen des Plugins aufgeführt. Eine Funktion, die für eine bestimmte "Sache" verantwortlich ist. Sie beinhalten:

Eine Funktion, die angibt, ob ein Element das Ansichtsfenster betritt. Wir verwenden es hauptsächlich, um festzustellen, ob der definierte Standort "Boden" im Ansichtsfenster sichtbar ist.

Eine Funktion, die eine Funktionsausführung anhält. bekannt als entprellen. Wie bereits erwähnt, werden wir uns mit dem Scrollen von Benutzern befassen, die sehr häufig auftreten werden. Daher wird eine Funktion innerhalb des scroll-Ereignisses häufig ausgeführt, nachdem der Benutzer gescrollt hat, wodurch das Bildlauferlebnis auf der Site träge oder verzögert wird.

Die obige Entprellfunktion reduziert die Ausführungshäufigkeit. Es wartet über den Parameter wait auf die angegebene Zeit, nachdem der Benutzer den Bildlauf beendet hat, bevor die Funktion ausgeführt wird.

Eine Funktion, die bestimmt, ob eine Operation fortgesetzt oder abgebrochen werden soll.

Wir werden die vorhergehende Dienstprogrammfunktion isProceed() verwenden, um zu untersuchen, ob alle Bedingungen erfüllt sind, um mit dem Abrufen neuer Inhalte fortzufahren. In diesem Fall wird die folgende Funktion ausgeführt, wobei der neue Inhalt abgerufen und nach dem letzten Artikel angehängt wird.

Fügen Sie diese Funktion innerhalb der init hinzu. Die Funktion wird also ausgeführt, sobald das Plugin initialisiert ist, und ruft dann den neuen Inhalt ab, wenn die Bedingungen erfüllt sind.

Dann fügen wir eine Funktion zum Ändern des Browserverlaufs mit der Verlaufsweb-API hinzu. Diese spezielle Funktion ist etwas komplexer als unsere vorhergehenden Funktionen. Der schwierige Teil hier ist, wann genau wir den Verlauf während des Benutzerscrolls, den Dokumenttitel sowie die URL ändern sollten. Das Folgende ist eine Illustration, um die Idee hinter der Funktion zu vereinfachen:

Wie Sie der Abbildung entnehmen können, haben wir drei Linien: "Dachlinie", "Mittellinie" und "Bodenlinie", die die Artikelposition innerhalb des Ansichtsfensters veranschaulichen. Das Bild zeigt, dass sich der untere Teil des ersten Artikels sowie der obere Teil des zweiten Artikels jetzt in der Mittellinie befinden. Es gibt nicht die Absicht des Benutzers an, welchen Artikel er sich ansieht. ist es der erste Beitrag oder ist es der zweite Beitrag? Daher würden wir den Browserverlauf nicht ändern, wenn sich zwei Artikel an dieser Position befinden.

Wir werden den Verlauf des nachfolgenden Beitrags aufzeichnen, wenn die Artikeloberseite die "Dachlinie" erreicht, da sie den größten Teil des sichtbaren Teils des Ansichtsfensters einnimmt.

Wir zeichnen den Verlauf des vorherigen Beitrags auf, wenn sein unterer Punkt die "Grundlinie" erreicht, ähnlich wie er jetzt den größten Teil des sichtbaren Teils des Ansichtsfensters einnimmt.

Dies ist der "while" -Code, den Sie hinzufügen müssen:

Zuletzt erstellen wir eine Funktion, die fetch() und history() ausführt, wenn der Benutzer die Seite scrollt. Dazu erstellen wir eine neue Funktion namens scroller() und führen sie bei der Plugin-Initialisierung aus.

Und wie Sie oben sehen können, entlarven wir diese, da sowohl das Ausführen von AJAX als auch das Ändern des Browserverlaufs eine teure Operation sind.

Hinzufügen eines Inhaltsplatzhalters

Dies ist optional, wird jedoch empfohlen, um die Benutzererfahrung zu berücksichtigen. Der Platzhalter gibt dem Benutzer Feedback und signalisiert, dass ein neuer Artikel unterwegs ist.

Zuerst erstellen wir die Platzhaltervorlage. In der Regel wird diese Art von Vorlage nach der Fußzeile der Site eingefügt.

Beachten Sie, dass der Platzhalterartikel und seine Struktur dem tatsächlichen Inhalt Ihres Blogs ähneln sollten. Passen Sie die HTML-Struktur entsprechend an.

Die Platzhalterstile sind einfacher. Es enthält alle grundlegenden Stile, um es wie den eigentlichen Artikel zu gestalten, die Animation @keyframe, die den Ladesinn simuliert, und den Stil zum Umschalten der Sichtbarkeit (der Platzhalter ist anfangs ausgeblendet; er wird nur angezeigt, wenn das übergeordnete Element den fetching-Klasse).

Anschließend aktualisieren wir einige Zeilen, um den Platzhalter während der AJAX-Anforderung wie folgt anzuzeigen.

So gehen wir mit dem Platzhalter um! Unser Plugin ist vollständig und es ist an der Zeit, das Plugin bereitzustellen.

Einsatz

Die Bereitstellung des Plugins ist recht einfach. Wir bestimmen das Element, das unseren Blog-Artikel umschließt, und rufen unser Plugin mit den festgelegten Optionen wie folgt auf.

Die unendliche Schriftrolle sollte jetzt funktionieren.

Vorsichtsmaßnahme: die Zurück-Taste

In diesem Tutorial haben wir eine unendliche Scroll-Erfahrung erstellt. etwas, das wir häufig auf Nachrichtenseiten wie Quartz, TechInAsia und in vielen mobilen Anwendungen gesehen haben.

Obwohl es sich als effektiver Weg erwiesen hat, die Benutzerinteraktion aufrechtzuerhalten, hat es auch einen Nachteil: Es bricht die Schaltfläche "Zurück" im Browser. Wenn Sie auf die Schaltfläche klicken, werden Sie nicht immer genau zum zuvor besuchten Inhalt oder zur zuvor besuchten Seite zurückgescrollt.

Websites behandeln dieses Problem auf verschiedene Weise. Quarz leitet Sie beispielsweise zur angegebenen URL weiter. die URL, die Sie zuvor besucht haben, jedoch nicht die über die Webprotokoll-API aufgezeichnete. TechInAsia bringt Sie einfach zurück zur Homepage.

Einpacken

Dieses Tutorial ist lang und deckt viele Dinge ab! Einige von ihnen sind leicht zu verstehen, während einige Stücke möglicherweise nicht so leicht zu verdauen sind. Als Hilfe zu diesem Artikel habe ich eine Referenzliste zusammengestellt.

Schauen Sie sich zum Schluss den vollständigen Quellcode an und sehen Sie sich die Demo an!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.