Detailliertes Beispiel für die Verwendung von InstantClick.js zum Vorladen der Seite in 200 ms

In diesem Artikel wird hauptsächlich die Verwendung von InstantClick.js zum Laden der Seite 200 ms im Voraus vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Vorwort

Es gibt viele Möglichkeiten, das Laden von Websites zu beschleunigen. Auf Empfehlung von @Roc habe ich InstantClick.js gefunden und das Englisch von sorgfältig überprüft Ich habe die offizielle Website durchgesehen und festgestellt, dass InstantClick.js eine gute Implementierungsidee hat (wie es funktioniert).

Bevor der Besucher auf einen Link klickt (testen Sie sich hier selbst):

• Hover (ca. 200 ms zwischen Hover->Klick)

• Mousedown (ca. 100 ms zwischen Mousedown->Klick),

• Touchstart-Handy-Touch

Normalerweise gibt es ein Intervall von 200 ms zwischen diesen beiden Ereignissen und InstantClick nutzt dieses Zeitintervall, um die Seite vorab zu laden. Wenn Sie auf diese Weise auf die Seite klicken, wird die Seite tatsächlich lokal geladen und das Rendern erfolgt natürlich sehr schnell.

Natürlich nutzt InstantClick auch Pjax: pushState und Ajax-Technologie

Gleichzeitig habe ich es ausprobiert und es hat wirklich gut funktioniert. Wenn Ihr Blog Pjax implementieren muss, wäre InstantClick eine gute Wahl.

Anleitung

Instantclick.js herunterladen. instantclick.min.js ist nur 2,5 KB groß, sehr klein

Verwenden Sie

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

Hinweis:

• Die Bedeutung von data-no-instant besteht darin, dass dieses JS nur einmal ausgeführt wird. Sie müssen

• entsprechend Ihrer eigenen Situation einstellen. Wenn Sie unnötiges Vorladen vermeiden möchten Bewegen Sie den Mauszeiger und aktivieren Sie Mousedown. Gute Wahl. Moursedown bedeutet, dass Sie auf den Link

geklickt haben, um den Effekt anzuzeigen.

Öffnen Sie die Chrome-Konsole und Sehen Sie sich die Netzwerkansicht an, die jedes Mal angezeigt wird, wenn Sie mit der Maus darüber fahren. Sie können die Seite zuerst laden und beim Klicken die Ergebnisseite anzeigen.

Da es keine gute Animationssoftware gibt, gibt es keine GIF-Animationsanzeige

Erweitert

InstantClick bietet auch mehrere Ereignisse, die eingestellt werden können.

• Seite ändern wird geändert, d. h. nachdem der Klick das Laden auslöst

• Abrufseite beginnt mit dem Vorladen

• Das Vorladen der Empfangsseite ist abgeschlossen, d. h. das Vorladen wird durch Hover oder Mousedown ausgelöst, ändert sich jedoch möglicherweise nicht, da der Benutzer möglicherweise nicht auf

Instanz

Da Ajax verwendet wird, zählt Google GA PV nicht, daher wird die Änderungsmethode hinzugefügt

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Verwendung von InstantClick.js zum Vorladen der Seite in 200 ms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!