jQuery_jquery に基づいてシミュレートされたページ読み込みプログレスバーを実装する

どの方法でもページ全体のサイズと現在どれだけ読み込まれているかを取得することはできないため、読み込みの進行状況バーを作成する唯一の方法は、それをシミュレートすることです。では、どうやってシミュレーションすればよいのでしょうか？


ページは上から下に実行されることがわかっています。つまり、ページ上の特定の場所でどれだけロードされるかを大まかに見積もることができ、jq を使用して進行状況をシミュレートできます。表示するバー。

まず、上の図にあるような進行状況バーを描画します。これについては詳しく説明する必要はありません。
CSS

コードをコピーします コードは次のとおりです:

.loading{position:relative;top:0;left:0}
.tip1{float:left ;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative}
.jindu{float :left;margin-left:20px; color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;width :0;高さ:0;フォント サイズ:0px;境界線の幅:10px;境界線の色:#fff #fff #fff #A70000;境界線のスタイル:固体;位置:絶対;左:-20px;上:5px ;overflow:hidden}
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{幅:150px;高さ: 32px;line-height:32px;text -align:center;position:absolute}

HTML

コードをコピー コードは次のとおりです。

システムの初期化中

>

合計ページ進行状況%

現時点での注意、jqueryライブラリを引用する必要があります。引用された場所はhead領域ではなく、htmlコードの直下にあります。これはなぜでしょうか? スタイルを head に置く理由は、ページを読み込む最初のステップでスタイルが読み込まれるようにして、ページが乱雑にならないようにするためです。 JS は必要なく、ページ上の大きなファイルは主に js であるため、本文に js を読み込むのはプログレス バー用です。
プログレスバーは jquery によって描画され参照されます。つまり、プログレスバーを動かすことができるメソッドを記述する必要があります。

コードをコピーします。 > コードは次のとおりです。

var reading = function(a,b){

var c = b*1.5
if(b==; 100){
$('.bgloader .jindu2').animate({width:c 'px'},500,function(){
$('.bgloader .tip1').text(a) ;
$( '.bgloader フォント').text(b);
$('.bgloader .loading').animate({top:'-32px'},1000,function(){
$('.bgloader ').fadeOut();
});
}else{
$('.bgloader .jindu2').animate({width:c) 'px'},500 ,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b); );
}
};


ここでは、ロード中のコンテンツのプロンプト情報とロードの進行状況を表示するための 2 つのパラメータを記述しました。他のいくつかの JS ライブラリを使用して読み込み進行状況テストを実行します

コードをコピー

コードは次のとおりです:

> ;

> ;

> ;

> ;

> ;

デモ下ダウンロード地址：点击下ダウンロード