上の図は、ブラウザーでの従来の Wordpress テンプレートの読み込みシーケンスを示しており、読み込みバーの表示と非表示が最初と最後に分散されています。 複数の JS をページ上の異なる場所に配置し、各 JS を使用してローディング バーの幅を徐々に増やす場合、このローディング バーは間違いなくより実用的な価値を持つことになります。読み込みを待つ訪問者の退屈をある程度軽減し、ページ読み込みの進捗状況を客観的に反映することもできます。 jQuery の組み込みアニメーション効果と組み合わせると、ブラウザーに付属のステータス バーと完全に同等になります。 まずデモを見てみましょう: address。 デモで進行状況バーの効果を得るには、まず jQuery フレームワークを導入します (ヘッダー タグに配置する必要があります)。次に、それを タグの開始位置に配置します: コードをコピーします コードは次のとおりです: CSS は次のように記述できます: コードをコピーします コードは次のとおりです。 #loading { width:100px; >高さ:20px; パディング:5px; 上:0; div { width:1px; height:20px; background:#F1FF4D; } これで準備作業は完了です。 あとは、図 2 の理解に従って、テンプレートの各部分の適切な位置に配置してください: コードをコピーします コードは次のとおりです: </u>$("#loading div" ).animate({width:"16px"}) </a> 赤い値は footer.php までの読み込み順に徐々に増加します。また、footer.php の最後に コードをコピーします コードは次のとおりです: </u>$("#loading").fadeOut() </a></span> </div>ロード完了後に使用されます。進行状況バーを非表示にします。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
