検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery を使用してページ読み込みプログレスバーをシミュレートするための実装コード

jQuery_jquery を使用してページ読み込みプログレスバーをシミュレートするための実装コード

WBOY
WBOYオリジナル
2016-05-16 17:58:251289ブラウズ

どの方法でもページ全体のサイズと現在どれだけ読み込まれているかを取得することはできないため、読み込みの進行状況バーを作成する唯一の方法は、それをシミュレートすることです。では、どうやってシミュレーションすればよいのでしょうか？
ページは上から下に実行されることがわかっています。つまり、ページ上の特定の場所でどれだけロードされるかを大まかに見積もることができ、jq を使用して進行状況バーをシミュレートして表示できます。
まず、上の図のようなプログレスバーを描画しましょう。これについてはあまり説明する必要はありません。
CSS

コードをコピーします コードは次のとおりです:
*{margin:0;padding:0;font-size:12px}
.loading{position:relative;top :0;left:0}
.text input{float:left;color:#fff;height:32px;line-height:34px;padding:0 15px;background :#A70000;border:0}
.jindu{float:left;margin-left:14px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:相対}
.jindu b{color: #A70000;font-size:0px;border-width:10px;border-color:transparent 透明 透明 #A70000;border-style:dotted dotted dotted solid;position:absolute;left :-16px;top:5px}
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{width:150px ;height:32px;line-height:32px; text-align:center;position:absolute}

HTML

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




< div class="text">合計ページ進行状況0%


< ;/div>


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


コードをコピーします。 > コードは次のとおりです。 var reading = function(a,b){
var c = b*1.5
if(b==; 100){
$('.loading .jindu2').animate({width:c 'px'},500,function(){
$('.loading input').val(a);
$(' .loading font').text(b);
$('.loading').animate({top:'-32px'},1000,function(){
alert( 'ページの読み込みが完了しました') ;
});
$('.loading .jindu2').animate({width:c 'px'},500 ,function(){
$('.loading input').val(a);
$('.loading font').text(b);
}
};


ここでは、ロード中のコンテンツのプロンプト情報とロードの進行状況のパーセンテージを表示するための 2 つのパラメーターを作成しました。読み込みの進行状況をテストします



コードをコピーします

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