jquery Webページの読み込みプログレスバーを実装する方法-jsチュートリアル-php.cn

jquery Webページの読み込みプログレスバーを実装する方法

小云云

リリース： 2018-01-10 10:58:17

オリジナル

2548 人が閲覧しました

この記事では主に、ページの読み込み中に上部に赤いプログレスバーが表示されるjqueryの実装について紹介します。興味のある方はぜひ参考にしてください。

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

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

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

ヘッダー、左側のコンテンツ、右側のサイドバー、フッターの 4 つの部分に分かれているページがあるとします。ページが各ノードを読み込むときに、ページのおおよその読み込み率を設定します。構造は次のとおりです:

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

ログイン後にコピー

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

<p class="loading"></p>

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

各ノードがロードされた後、jQuery が animate() アニメーションメソッドを呼び出してプログレスバーの幅を変更し、プログレスバーの表示をより滑らかにするのに 50 ミリ秒かかります。 0 % から 100% に変化し、進行状況バーの進行状況アニメーションが完了します。

進行状況バーが 100% に達したら、ページが読み込まれます。最後のステップは、進行状況バーを非表示にすることです。

$(document).ready(function(){ 
  $(&#39;.loading&#39;).fadeOut();   
});

ログイン後にコピー