jQuery_jquery に基づいてシミュレートされたページ読み込みプログレスバーを実装する-jsチュートリアル-php.cn

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

コードをコピー

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

人気のチュートリアル

詳細>