de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

So optimieren Sie die Conversion-Rate mit Persuasive Web Design

So optimieren Sie die Conversion-Rate mit Persuasive Web Design

Wenn Menschen über ein effektives Webdesign nachdenken, berücksichtigen sie in der Regel Ästhetik und visuelle Attraktivität. Neben dem visuellen Aspekt muss ein Webdesign aber auch eine gute Nutzererfahrung haben .Die Kombination aus visueller Attraktivität und effizienter User Experience sorgt für ein überzeugendes Webdesign. Ein ü

(Tech- und Design-Tipps)

50+ Hohe Qualität und kostenlose Symbol Schriftarten für Webdesigner

50+ Hohe Qualität und kostenlose Symbol Schriftarten für Webdesigner

In letzter Zeit tauchen im Web immer wieder eindrucksvoll aussehende Symbolschriften auf. Die Anzahl der Schriftarten, die für die Verwendung als Symbole, Symbole und Glyphen entwickelt wurden, nimmt täglich zu. Tatsächlich haben viele Websites ihre Bilder bereits durch eine einzige Symbolschrift ersetzt - GitHub ist ein Beispiel dafür.Dur

(Tech- und Design-Tipps)