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

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

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

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

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

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

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


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

コードをコピーします

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

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

コードをコピーします

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