フロントエンドインプリメンテーションパーセンテージプログレスバー

html 5の普及に伴い、各種css 3アニメーションやjs特効はウェブページにも次々と現れ、PC側のデータロード速度は比較的速いが、モバイル側のデバイスにとっては相対的に遅く、画像やスクリプトがロードされていない場合、ユーザーは操作中に様々な問題が発生する可能性があるため、データロードを検出する必要がある.より人間的な方法でWebプログラムの内容をユーザーに表示し、より良いユーザー体験を実現します.
1.タイマー実装プログレスバーの利点:大部分のロードプログレス問題の欠点を解決する:一旦キャッシュがあると、タイマーのロードは鶏の肋骨になる
    <br> $(function(){<br>//jqueryを使用してマスクおよびloading効果を動的に追加できます<br>//var loading='<div class=“loading”><div class=“pic”><</div></div>';<br>/$(“body”).append(loading);<br>//タイマーを起動<br> setInterval(function(){<br>$(".loading").fadeOut()/3秒後に影蔵<br>            },3000)<br>         })</p>
</blockquote>
<p>2.ステータスイベントをロードしてプログレスバーを作成する</p>
<ul>
<li>1.document.onredystatechangeページのロード状態が変化したときのイベント</li>
<li>2.document.readyStateは、現在のドキュメントのステータスを返します</li>
<li>
<ul>
<li>1.uninitializedはまだロードを開始していません</li>
</ul></li>
<li>
<ul>
<li>2.loadingロード中</li>
</ul></li>
<li>
<ul>
<li>3.interactiveがロードされ、ドキュメントとユーザーが対話を開始できます</li>
</ul></li>
<li> <p> </p>
<ul>
<li>4.complete読み込み完了</li>
</ul></li>
</ul>
<blockquote>
<pre><code class="language-html hljs"><script type="text/javascript">
document.onreadystatechange=function(){
if(document.readyState=="complete"){
$(".loading").fadeOut();
}
}
3.ページをカスタマイズしてロードする必要がある画像の数で進捗バーを作成する利点:事前にロードする必要がある画像をカスタマイズし、必要に応じて事前にロードしやすく、背景図を事前にロードすることができ、基本的に80%の需要と欠点を満たすことができる:jsを通じて画像をロードする必要がある
//この方式はまた怠惰なロードの使用をすることができて、ページは一部をロードして、ページは表示した後に残りの部分をロードします

var imgSrcArr = [
    'img/1.png',
    'img/2.png',
     ......
];

var imgWrap = [];

function preloadImg(arr) {
    for(var i =0; i< arr.length ;i++) {
        imgWrap[i] = new Image();
        imgWrap[i].src = arr[i];
    }
}

preloadImg(imgSrcArr); 

ようこそ