Web ページ読み込み進行状況バーコードの JavaScript 実装は非常にシンプルです_JavaScript スキル

Web ページの進行状況バーは、現在の Web ページの読み込み進行状況をより適切に反映して、Web ページの読み込みプロセスを完了するために 0% から 100% までアニメーション化できます。ただし、現在のブラウザーにはページの読み込みの進行状況を示すインターフェイスが提供されていないため、ページはページの実際の読み込みの進行状況を正確に返すことができません。この記事では、jQuery を使用してページの読み込みの進行状況バーの効果を実現します。

HTML

最初に知っておく必要があるのは、現時点ではロードされているオブジェクトのサイズを直接取得できるブラウザはないということです。したがって、データサイズによって 0 ～ 100% の読み込みおよび表示処理を実現することはできません。

したがって、HTML コードの行ごとの読み込み機能を使用し、ページ コード全体のいくつかのスキップ行にノードを設定し、進行状況の読み込みの効果を実現するために、おおよそのあいまいな進行状況フィードバックを提供する必要があります。一般的な意味は、ページが指定された領域にロードされるたびに (n)% の進行状況の結果が返されることです。複数のノードを設定することで、読み込みの進行状況を段階的に表示するという目的が達成されます。

ページがある場合、ブロックに従ってヘッダー、左側のコンテンツ、右側のサイドバー、フッターの 4 つの部分に分かれており、ページが各ノードを読み込むときに、この 4 つの部分を 4 つのノードとして扱います。読み込みパーセンテージ、ページ構造は次のとおりです:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

次に、progress bar.loading を 6c04bd5ca3fcae76e30b72ad730ca86d の下の最初の行に追加します。

<div class="loading"></div> 

CSS

読み込み進行状況バーのスタイルを設定し、背景色、高さ、位置、優先度などを設定する必要があります。

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

次に、各ノードの背後に進行状況アニメーションを追加し、jQuery を使用して実装する必要があります。

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script> 

ノードをロードしないと、jQuery が animate() アニメーション メソッドを呼び出してプログレス バーの幅を変更し、プログレス バーの見た目を滑らかにするのに 50 ミリ秒かかり、最終的には 0 から変化することがわかります。 % ～ 100% にすると、プログレスバーの進捗アニメーションが完了します。

進行状況バーが 100% に達したら、ページが読み込まれます。最後に、進行状況バーを非表示にします。

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});