ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery に基づいてシミュレートされたページ読み込みプログレスバーを実装する
jQuery_jquery に基づいてシミュレートされたページ読み込みプログレスバーを実装する
- WBOYオリジナル
- 2016-05-16 17:38:411102ブラウズ
どの方法でもページ全体のサイズと現在どれだけ読み込まれているかを取得することはできないため、読み込みの進行状況バーを作成する唯一の方法は、それをシミュレートすることです。では、どうやってシミュレーションすればよいのでしょうか？ 
ページは上から下に実行されることがわかっています。つまり、ページ上の特定の場所でどれだけロードされるかを大まかに見積もることができ、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 によって描画され参照されます。つまり、プログレスバーを動かすことができるメソッドを記述する必要があります。
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 ライブラリを使用して読み込み進行状況テストを実行します
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 ライブラリを使用して読み込み進行状況テストを実行します
コードをコピー