Advertisement
  1. Web Design
  2. JavaScript

Wie man einen gefälschten AJAX "Load More"-Mechanismus erstellt (JavaScript-Tutorial)

by
Read Time:6 minsLanguages:

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Letztens arbeitete ich an einem WordPress-Projekt, das die flexiblen Inhalte von ACF (Advanced Custom Fields) Pro verwendete. Wenn Sie mit diesem Feld nicht vertraut sind, stellen Sie sich es als eine Miniatur der Gutenberg- und Elementor-Builder vor, die Ihnen die Möglichkeit gibt, verschiedene Layouttypen zu definieren. In diesem Projekt erforderte das Design eine "Load More" Taste für das Laden weiterer Ergebnisse auf Klick.

Die korrekte und genaueste Art, dies zu tun, ist die Verwendung von AJAX und etwas PHP-Code zum Laden der Ergebnisse in Bereichen.

Eine zweite schnellere, aber schmutzige Art und Weise, die ich schließlich ausgewählt habe, besteht darin, standardmäßig alle Ergebnisse anzuzeigen und ein wenig JavaScript zu verwenden, um einen Mechanismus zu erstellen, den ich gerne als "Fake AJAX Load More" bezeichnen möchte.

Die gute Nachricht über diesen Ansatz ist, dass Sie ihn überall dort verwenden können, wo Sie eine "Load More"-Funktionalität implementieren möchten.

Die schlechte Nachricht ist, dass Sie es aus Performancegründen mit Vorsicht verwenden müssen. Wie ich bereits sagte, ist es ein fake AJAX-Mechanismus, so dass alles Markup standardmäßig ausgegeben wird.

Aber genug Einleitung, lassen Sie uns diese Technik in Aktion sehen, indem wir eine Bildergalerie erstellen. Hier ist die letzte Demo:

Achten Sie darauf, auf die Schaltfläche zu klicken, um weitere Ergebnisse zu laden. Wenn keine anderen Ergebnisse angezeigt werden, wird es verschwinden.

1. Beginnen Sie mit dem HTML-Markup

Wir beginnen mit einer ungeordneten Liste mit 20 Listenelementen und einem Load More Button. Jedes Listenelement enthält ein Hintergrundbild von Unsplash:

2. Definieren Sie einige grundlegende Stile

Wie wir es sehr häufig tun, werden wir vor der Untersuchung der Hauptstile einige grundlegende Reset-Regeln einrichten (z. B. eine Google-Schriftart):

3. Geben Sie die Hauptstile an

Als nächstes verwenden wir CSS Grid, um das Raster in drei Spalten gleicher Breite aufzuteilen. Jede Spalte (Listenelement) hat eine feste Höhe, die je nach Ansichtsfensterbreite variiert. Jede zehnte Spalte ab der ersten und achten Spalte (erste, achte, elfte, 18. usw.) ist jedoch doppelt so hoch (ohne die Reihenlücke) wie die anderen Spalten. Diese "Ausnahme" wird uns helfen, die Seite ein bisschen einzigartiger zu machen und weg vom standardmäßigen dreispaltigen Layout zu kommen.

The grid layoutThe grid layoutThe grid layout

Darüber hinaus werden in unserem Fall standardmäßig nur die ersten fünf Spalten angezeigt.

Hier sind die gewünschten Styles für unser Raster:

Beachten Sie insbesondere die :not() CSS-Pseudoklasse, die wir den Mustern hinzufügen, die auf bestimmte Spalten abzielen. Dieser zusätzliche Filter stellt sicher, dass es je nach Anzahl keine Inkonsistenzen zwischen der Höhe der Spalten gibt.

The gap issue that the :not() pseudo-class solvesThe gap issue that the :not() pseudo-class solvesThe gap issue that the :not() pseudo-class solves

Um es besser zu verstehen, fügen Sie zwei oder acht zusätzliche Spalten (insgesamt 22 oder 28) hinzu und entfernen Sie die Pseudoklasse :not() wie folgt:

4. Fake AJAX-"Load More"

Jedes Mal, wenn wir auf die Schaltfläche klicken, erscheinen fünf weitere Spalten. Aber hier ist die knifflige Sache – es sollten nur die erscheinen, die zu einem bestimmten Bereich gehören. Dieser Bereich wird dynamisch und ändert sich per Klick.

Lassen Sie mich konkreter werden.

Standardmäßig sind die ersten fünf Spalten sichtbar. Beim ersten Schaltflächenklick werden Spalten zwischen sechs und zehn angezeigt. Dann, beim zweiten Klick, die Spalten 11 bis 15. Beim dritten Klick die Spalten von 16 bis 20 usw.

Erstellen eines Bereichs mit CSS-Selektoren

Um die gewünschten Bereiche zu erstellen, nutzen wir die :nth-child CSS-Pseudoklasse. Aber wir werden nicht nur eine solche Pseudoklasse verwenden. Das heißt, wir werden zwei Pseudo-Klassen (wir haben es zuvor in CSS getan) wie folgt verketten:

In der menschlichen Sprache können Sie den Selector wie folgt beschreiben:

"Wählen Sie alle Listenelemente zwischen sechs und zehn aus."

Machen Sie den Bereich dynamisch

Nun, da wir wissen, wie man einen Bereich mit CSS erstellt, müssen wir es nur noch dynamisch machen. Dazu verwenden wir die k- und j-Variablen, die als Zähler fungieren. Ihre Anfangswerte zielen auf die Spalten ab, die beim ersten Klick angezeigt werden müssen. Darüber hinaus erhöhen wir ihre Werte nach einem Klick um fünf. Dies wird uns helfen, jeden nächsten Bereich anzusprechen.

Wenn die Anzahl der Spalten kleiner oder gleich der Wert von j ist, bedeutet dies, dass alle Spalten sichtbar sind, und wir können die Schaltfläche daher sicher entfernen.

Hier ist der erforderliche JavaScript-Code:

In Ihren Projekten können Sie eine andere Anzahl von Spalten anzeigen, sowohl zunächst als auch auf Anfrage. In diesem Fall müssen Sie die folgenden Dinge ändern:

  • Der CSS-Selektor, der die anfänglich sichtbaren Spalten bestimmt.
  • Die Anfangs- und Offsetwerte der Variablen k und j.

5. Auswirkungen auf die Leistung

Wie in der Einleitung erwähnt, seien Sie vorsichtig, wenn Sie diese Technik verwenden. Im Gegensatz zu AJAX wird das gesamte Markup auf der Seite auf einmal ausgegeben. Dies kann zu Leistungsproblemen führen, wenn Hunderte von Zeilen vorhanden sind.

The page markupThe page markupThe page markup

Wenn Sie mit Ihrem Projekt diese Lösung verwenden können, können Sie die Seitengeschwindigkeit verbessern. Hier haben wir zum Beispiel die Bilder als Hintergründe hinzugefügt. Obwohl das gesamte Markup standardmäßig ausgegeben ist, laden die Browser (zumindest die neuesten, die ich getestet habe) nur die sichtbaren Bilder. Dieses Verhalten tritt auch bei jeder fake AJAX-Anforderung auf. Das ist ein großer Gewinn in Bezug auf die Seitenleistung.

Um es zu testen, öffnen Sie die Browserkonsole und drücken Sie das Netzwerkbedienfeld. Beachten Sie, wie sich die Größe der Seitenressourcen durch Klicken ändert. Sie können auch die Anforderungen für Bilder filtern, um deren Datenverkehr anzuzeigen.

The Network tabThe Network tabThe Network tab

Schlussfolgerung

Das ist alles, Leute! Heute haben wir zunächst eine attraktive Bildergalerie mit CSS Grid erstellt und dann eine ordentliche Methode durchlaufen, die die AJAX-Technik reproduziert, um die Bilder in Schritten zu enthüllen. Hoffentlich fanden Sie diese Technik nützlich und haben sie in Ihrer Gesäßtasche.

Hier ist eine Erinnerung an das, was wir gebaut haben:

Wie immer vielen Dank für das Lesen!

Nächste Schritte

Dieses Demoprojekt kann in einem realen Projekt als Galerie verwendet werden. Wenn Sie dies beabsichtigen, als praktische Erweiterung, stellen Sie sicher, eine Lightbox-Galerie hinzuzufügen, die die vollständigen Bilder zeigt. Und natürlich würde ich gerne sehen, was Sie sich ausgedacht haben!

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.