Pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten-js-Tutorial-php.cn

Pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten

高洛峰

Freigeben： 2016-12-16 16:45:15

Original

1368 Leute haben es durchsucht

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 sehr gut kompatibel und mit allen Mainstream-Plug-Ins über IE8 kompatibel. Darüber hinaus können Sie den Designstil des Ladefortschrittsbalkens einführen. Sie können eine beliebige Farbe und mehrere Animationseffekte auswählen. (z. B. Einfachheit, Flash, MAC OSX, linker Abstand, oberer Abstand, Counter und Bounce usw. Animationseffekte). Wenn Sie gut darin sind, CSS-Animationen zu ändern, können Sie unbegrenzte Animationsmöglichkeiten erstellen, um Ihrer Website personalisierte Funktionen hinzuzufügen!

So verwenden Sie

Pace.js und Designdateien vorstellen:

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

Nach dem Login kopieren

Benutzerdefinierte Konfiguration

Pace.js wird automatisch auf die Seite geladen Es besteht keine Notwendigkeit, sich an einen Code anzuschließen, und der Fortschritt wird automatisch erkannt. Wenn Sie einige Anpassungen vornehmen möchten, können Sie window.paceOptions festlegen, um die Konfiguration anzupassen:

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

Nach dem Login kopieren

Sie können die benutzerdefinierten Einstellungen auch in das Skript-Tag einfügen, zum Beispiel:

<script data-pace-options=&#39;{ "ajax": false }&#39; src=&#39;pace.js&#39;></script>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Verwenden der API

Pace.js öffentliche API-Liste:

Pace.start: Anzeige des Fortschrittsbalkens starten Wenn Sie nicht AMD oder Browserify 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.

Weitere Artikel zum Thema „pace.js – Fortschrittsbalken-Plug-in zum automatischen Laden von Webseiten“ finden Sie auf der chinesischen PHP-Website!