Pace.js – Web ページの自動読み込みプログレスバープラグイン-jsチュートリアル-php.cn

Pace.js – Web ページの自動読み込みプログレスバープラグイン

高洛峰

リリース： 2016-12-16 16:45:15

オリジナル

1309 人が閲覧しました

Pace.js をページに導入すると、ページはリクエスト (Ajax リクエストを含む) を自動的に監視し、イベントループに遅れが生じた場合、読み込みステータスと進行状況がページに記録されます。このプラグインは互換性が非常に高く、IE8 以降のすべての主流プラグインと互換性があります。さらに、その利点は、読み込み進行状況バーのテーマスタイルを導入できることです。任意の色と複数のアニメーション効果を選択できます。シンプルさ、フラッシュ、MAC OSX、左パディング、上部パディング、カウンターとバウンスなどのアニメーション効果など）、CSS アニメーションの変更が得意であれば、アニメーションの無限の可能性を作成して、Web サイトにパーソナライズされた機能を追加できます。

使用方法

Pace.js とテーマファイルを紹介します:

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

ログイン後にコピー

カスタム構成

Pace.js はコードにフックされることなく自動的にページに読み込まれ、進行状況が自動的に検出されます。いくつかの調整を行いたい場合は、window.paceOptions を設定して構成をカスタマイズできます:

  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
  }

ログイン後にコピー

スクリプトタグにカスタム設定を入れることもできます。たとえば:

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

ログイン後にコピー

AMD または Browserify を使用してモジュールをロードする場合次のように設定できます (例: start):

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

ログイン後にコピー

API を使用

Pace.js パブリック API リスト:

Pace.start: AMD または Browserify を使用していない場合は、進行状況バーの表示を開始します。モジュールをロードします。これはデフォルトで実行されます。

Pace.restart: プログレスバーが再ロードされて表示されます。

Pace.stop: 進行状況バーを非表示にし、読み込みを停止します。

Pace.track: 1 つ以上のリクエストタスクを監視します。

Pace.ignore: 1 つ以上のリクエストタスクを無視します。

pace.js – Web ページ自動読み込みプログレスバープラグインに関するその他の記事については、PHP 中国語 Web サイトに注目してください。

Pace.js – Web ページの自動読み込みプログレスバー プラグイン

Pace.js – Web ページの自動読み込みプログレスバープラグイン