Fügen Sie Ihre eigene Seitenlade-Fortschrittsleiste mit Pace.js hinzu

Für manche Benutzer kann eine Fortschrittsanzeige sehr nützlich sein. Es informiert sie darüber, wie viel näher sie Aufgaben erledigen. Normalerweise wird dies verwendet, um eine benutzerfreundlichere Erfahrung zu ermöglichen. Wenn Sie eine Webseite in Ihrem bevorzugten Browser öffnen, gibt es bereits eine Standardfortschrittsleiste in der Browser-Registerkarte, um zu sehen, ob die Seite vollständig geladen ist.

Mit Pace.js können Sie jetzt die Fortschrittsanzeige für den Seitenladevorgang in Ihre eigene Seite integrieren.

Pace.js ist eine Javascript-Bibliothek , um eine schöne Seitenlade-Fortschrittsleiste in einer Website zu erstellen . Der Fortschritt wird automatisch ermittelt, indem Ajax-Anforderungen, Dokumentbereitschaftsstatus, Ereignisschleife (zeigt, dass JavaScript ausgeführt wird) und das Vorhandensein bestimmter Elemente auf einer Seite untersucht werden.

Wenn eine Ajax-Navigation oder ein pushState Ereignis stattfindet, wird die Fortschrittsanzeige ebenfalls neu gestartet.

Anfangen

Pace.js ist sehr einfach zu implementieren. Es kann auch ohne jQuery-Bibliothek in Ihrer Website verwendet werden. Sie müssen pace.js und ein CSS-Thema Ihrer Wahl so früh wie möglich in Ihr Dokument einfügen :

Das ist es! Du bist fertig und deine Seite hat jetzt einen schönen Seitenlade-Fortschrittsbalken.

Aufbau

Im Grunde genommen ist keine zusätzliche Konfiguration erforderlich, da Pace.js vollständig automatisiert ist. Wenn die Standardeinstellung jedoch nicht Ihren Anforderungen entspricht, können Sie auch Ihre eigene Konfiguration verwenden.

Um sie weiter anzupassen, gibt es zwei einfache Methoden, die Sie auswählen können. Erstens, indem Sie die Konfiguration in window.paceOption wie folgt window.paceOption .

Bei einer zweiten Methode können Sie einfach data-pace-options innerhalb eines Skript-Tags hinzufügen, dann die Konfiguration definieren und die Ressource pace.js wie folgt aufrufen.

Sie finden die vollständige Liste der verfügbaren Konfigurationen, die Sie auf der Quellseite verwenden können.

Letzter Gedanke

Dieses Plugin enthält eine Reihe von gebrauchsfertigen Designs . Um die vollständige Liste und die Demo der Themen zu sehen, können Sie auf die Plugin-Seite gehen. Wenn diese Themen nicht zu Ihnen passen, können Sie ganz einfach Ihre eigenen erstellen. Mit Hilfe eines Plugins wie Pace.js müssen Sie sich jetzt keine Gedanken mehr über die Schwierigkeiten machen, einen Lade-Seiten-Fortschrittsbalken in Ihre Site zu implementieren.

Wie De-Tech Ihre Familie für die Feiertage

Es ist die Zeit des Jahres, in der die Familie am Tisch zusammenkommt, um die Gesellschaft des anderen und das üppige Essen vor sich zu genießen. Dann ... kommt ein Benachrichtigungston - da geht jemand wieder auf Facebook oder eine Messaging-App. Seufzen, so viel für eine gute Familienzeit.Wenn Ihnen das mehr schadet, als Sie zugeben möchten, und wenn Ihre Bitte um ein ungestörtes Weihnachtsessen auf taube Ohren stößt, haben Sie sich vielleicht schon auf einen Abend von allen verlassen, die auf ihre Bildschirme am Esstisch starren. Aber

(Tech- und Design-Tipps)

Alles, was Sie über Microsoft Build 2017 wissen müssen

Microsoft hat gerade seine Build 2017-Veranstaltung abgeschlossen, und damit haben wir jetzt eine Idee, woran das Unternehmen für das nächste Jahr oder so arbeiten wird.Während das Ereignis in Hardware-Enthüllungen fehlt, wie es bei einem getrennten Ereignis geschehen wird, das später im Mai geplant wird, hat das Unternehmen eine Anzahl von Details bezüglich der Zukunft von Windows 10, Cortana, künstlicher Intelligenz und viel mehr veröffentlicht. Hier f

(Tech- und Design-Tipps)