pace.jsとNProgress.js 2つのロード進捗プラグインのちょっとしたまとめ

4373 ワード
この2つのプラグインはいずれも進捗アニメーションのロードに関するもので、それぞれ特徴があると言えるでしょう.少なくとも私にとってはそれぞれ優位です.今日一日でロードの進捗アニメーションを練って、大量の(つまりこの2つだけ)ロードの進捗アニメーションも研究して、ロードの進捗アニメーションに対して1つの初歩的な理解があったと言えるでしょう.
 
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">
 <script src="js/NProgress.js" type="text/javascript"></script>
//  jquery

次の操作を行います.
<script>
　　$(function() {
    　　NProgress.start();
    　　$(window).load(function() {
        　　NProgress.done();
    });
 </script>

カスタムアニメーションスタイル:
私たちが定義したスタイルをscriptラベルに書くのは、小さなテクニックでしょう.
<script type="text" id="myId">
　　<div class="splash card">
    　　<p class="lead" style="text-align:center">    ，    ...</p>
   　　 <div class="progress">
        　　<div class="mybar" role="bar">
        　　</div>
    　　</div>
　　</div>
</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プロパティです.
role=bar:横読み込みバー
role=spinner回転の小輪
例2:(cssは省略)
<script type="text" id="myId">
　　<div class="bar" role="bar" style="display=block">
　　　　<div class="peg"></div>
　　</div>
　　<div class="spinner" role="spinner">
　　　　<div class="spinner-icon"></div>
　　</div>
</script>

　　pace.js:
　　　　API:　　
  • 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" />  
    　　<!--    css                -->
</head>

     
    アニメーションスタイルを変更するには
    paceにはすでに多くのロード進捗アニメーションが設計されており、cssファイルを変更するだけでいいです.
    まとめ:
    paceの利点は、ファイルを直接導入すればよいことです.自分でコードを書く必要がなく、進捗アニメーションをロードすることができます.ただ、ホームページで提供されている進捗アニメーションにはマスク層がありません.
    もちろん、自分で設定することができます(私はできません);
    Javascriptフレームワークのカスタムイベント
    IE 6を解決するPNG透明JSプラグインの使用紹介