ホームページ >ウェブフロントエンド >jsチュートリアル >Pace.js および NProgress.js で読み込み進行状況プラグインを使用する方法 (詳細なチュートリアル)
Pace.js および NProgress.js で読み込み進行状況プラグインを使用する方法 (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-08 17:24:052038ブラウズ
これら 2 つのプラグインは、読み込み進行状況アニメーションに関するものです。今日は、2 つの読み込み進行状況プラグイン、pace.js と NProgress.js について簡単に説明します。興味のある方は、これら 2 つを一緒に見てください。プラグインは進行状況アニメーションをロードするためのものであり、少なくとも私にとってはそれぞれに独自の利点があると言えます。今日は読み込み進行状況のアニメーションをいじって、たくさん (この 2 つだけ) の読み込み進行状況のアニメーションを研究しました。読み込み進行状況のアニメーションについて予備的な理解ができたと思います。
NProgress.js
NProgressはjqueryに基づいており、バージョンは>1.8である必要があります
API:
NProgress.start() — プログレスバーを開始します
NProgress.set(0.4) — 進行状況を特定のレベルに設定しますパーセント位置 NProgress.inc() — 進行状況を少しずつ増やします
NProgress.done() — プログレスバーを完了としてマークします
導入:
<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" > <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来
使用:
<script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>カスタムアニメーションスタイル:
スタイルを書きますscript タグ内で次のように定義しました。これはちょっとしたトリックです。
<script type="text" id="myId"><br> <p class="splash card"><br> <p class="lead" style="text-align:center">不要回来，马上走开...</p> <p class="progress"> <p class="mybar" role="bar"> </p> </p> </p><br></script>
これは css です
html,body,iframe{
margin: 0;
padding: 0;
}
#nprogress{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f7f7f7;
z-index: 999;
}
.spinner-icon{
display: none!important;
}
.splash {
position:absolute;
top:40%;
left:0;
right:0;
margin: auto;
}
.splash img {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.card {
background-color: #f7f7f7;
padding: 20px 25px 15px;
margin: 0 auto 25px;
width: 380px;
}
.mybar {
background: #29d;
height:10px;
}
.progress {
height: 10px;
overflow: hidden;
}js コードは次のようになります:
<script type="text/javascript">
$(function(){
NProgress.configure({
template: $('#myId').html() // template是用来设置动画样式的属性
});
NProgress.start();
});
$(window).load(function(){
NProgress.done();
})
</script>概要: js でのアニメーションの開始と終了、および読み込まれたアニメーション スタイルを制御します。
カスタム スタイルの 2 つの重要なポインターはロール属性です:
role=bar: 水平読み込みバー
role=spinner 回転する小さな円
サンプル 2: (CSS 省略)
<script type="text" id="myId"> <em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br> <p class="peg"></p><br> </p><br> <p class="spinner" role="spinner"><br> <p class="spinner-icon"></p><br> </p></em></em> </script>
pace. :
Pace.start: モジュールのロードに AMD または Browserify を使用していない場合、これはデフォルトで実行されます。
Pace.restart: プログレスバーが再ロードされて表示されます。Pace.stop: 進行状況バーを非表示にし、読み込みを停止します。
Pace.track: 1 つ以上のリクエスト タスクを監視します。Pace.ignore: 1 つ以上のリクエストタスクを無視します。
使用方法:
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br> <!-- 此处的css样式就决定了加载进度动画的样式 --> </head>
アニメーションスタイルの変更:
pace はすでに多くの種類の読み込み進行アニメーションをデザインしています。必要なのは CSS ファイルを変更するだけです
概要:
pace にはファイルを直接インポートできるという利点がありますそれだけです。自分でコードを記述する必要はありません。公式 Web サイトが提供する読み込み進行状況のアニメーションには、マスク レイヤーがありません。 もちろん、自分で設定することもできます (方法はわかりません)。
上記は、すべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。
関連記事:
ajaxを使用してvue.jsでページをレンダリングする方法ajaxリクエスト+vue.jsレンダリング+ページ読み込み
Vue.jsでページが点滅する問題を解決する方法データを表示します
以上がPace.js および NProgress.js で読み込み進行状況プラグインを使用する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。