Heim > Artikel > Web-Frontend > Pace.js Seite lädt Fortschrittsbalken Plug-in_Javascript-Kenntnisse

Pace.js Seite lädt Fortschrittsbalken Plug-in_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:37:381301Durchsuche

In diesem Artikel wird das Plugin „pace.js“ kurz vorgestellt.

Fügen Sie Pace.js in die Seite ein und die Seite überwacht automatisch Ihre Anfragen (einschließlich Ajax-Anfragen). Wenn die Ereignisschleife verzögert wird, werden der Ladestatus und der Fortschritt auf der Seite aufgezeichnet. Dieses Plug-in ist gut kompatibel und mit allen gängigen Plug-ins über IE8 kompatibel. Darüber hinaus können Sie den Designstil des Ladefortschrittsbalkens auswählen B. Einfachheit, Flash, MAC OS

Aufrufmethode:

Pace.js und Designdateien vorstellen:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

Benutzerdefinierte Konfiguration:

Pace.js wird automatisch in die Seite geladen. Es muss nicht an einen Code gebunden werden und erkennt den Fortschritt automatisch. Wenn Sie einige Anpassungen vornehmen möchten, können Sie window.paceOptions festlegen, um die Konfiguration anzupassen:

paceOptions = {
 // Disable the 'elements' source
 elements: false,
 // Only show the progress on regular and ajax-y page navigation,
 // not every request
 restartOnRequestAfter: false
}

Sie können auch benutzerdefinierte Einstellungen in Skript-Tags einfügen, zum Beispiel:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

Wenn Sie AMD oder Browserify zum Laden von Modulen verwenden, können Sie es so einstellen (zum Beispiel: Start):

define(['pace'], function(pace){
 pace.start({
  document: false
 });
});

API verwenden:

Pace.js öffentliche API-Liste:

Pace.start: Anzeige des Fortschrittsbalkens starten. Wenn Sie AMD oder Browserify nicht zum Laden des Moduls verwenden, wird dies standardmäßig ausgeführt.

Pace.restart: Der Fortschrittsbalken wird neu geladen und angezeigt.

Pace.stop: Fortschrittsbalken ausblenden und Laden stoppen.

Pace.track: Überwachen Sie eine oder mehrere Anforderungsaufgaben.

Pace.ignore: Eine oder mehrere Anforderungsaufgaben ignorieren.

Im Grunde sind dies die allgemeinen Verwendungsmethoden, und es gibt noch andere Methoden. Bitte besuchen Sie die offizielle Website, um eine detailliertere Einführung anzuzeigen. Ich hoffe, dieses Plug-in kann allen helfen!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Webseite übergibt den Wert des Popup-Seiten-Optionsfelds an den Code „sharing_javascript skills“ der übergeordneten SeiteNächster Artikel：Die Webseite übergibt den Wert des Popup-Seiten-Optionsfelds an den Code „sharing_javascript skills“ der übergeordneten Seite

In Verbindung stehende Artikel

Mehr sehen