jQuery ページ読み込み進行状況バーの実装 code

loading Process traditional

上の図は、ブラウザーでの従来の Wordpress テンプレートの読み込みシーケンスを示しており、読み込みバーの表示と非表示が最初と最後に分散されています。

new loading bar

複数の JS をページ上の異なる場所に配置し、各 JS を使用してローディングバーの幅を徐々に増やす場合、このローディングバーは間違いなくより実用的な価値を持つことになります。読み込みを待つ訪問者の退屈をある程度軽減し、ページ読み込みの進捗状況を客観的に反映することもできます。 jQuery の組み込みアニメーション効果と組み合わせると、ブラウザーに付属のステータスバーと完全に同等になります。
まずデモを見てみましょう: address。
デモで進行状況バーの効果を得るには、まず jQuery フレームワークを導入します (ヘッダータグに配置する必要があります)。次に、それをタグの開始位置に配置します:

コードをコピーしますコードは次のとおりです:

CSS は次のように記述できます:

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

#loading { 
width:100px; >高さ:20px; 
パディング:5px; 
上:0; div { 
width:1px; 
 height:20px; 
background:#F1FF4D; 
} 


 これで準備作業は完了です。 
あとは、図 2 の理解に従って、テンプレートの各部分の適切な位置に配置してください: 

コードをコピーします

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

赤い値は footer.php までの読み込み順に徐々に増加します。また、footer.php の最後に 

コードをコピーします

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

人気のチュートリアル

詳細>

jQuery ページ読み込み進行状況バーの実装 code_jquery