＆＃039;は、派手ではあるが、複雑でないページローダーを作りましょう

最新のWebサイト、特にプログレッシブWebアプリやリアクティブサイトは、認知されたパフォーマンスを向上させるために積み込み状態を頻繁に採用しています。これにより、読み込み時間が速くなるという幻想が生まれます。複雑なローダーはたくさんありますが、驚くほど効果的なソリューションには最小限のCSSとJavaScriptが必要です。

このチュートリアルは、シンプルでありながらエレガントなアプローチを示しています。

SVGおよびCSS：ミニマリストのスピナー

プロジェクトが設定されていると仮定すると、スピナー（プレローダーとも呼ばれます）から始めましょう。 SVGは、画像タグと同様に、スケーラビリティと実装の容易さのためにスピナーに最適です。ゼロから作成することはできますが、便利なためにloading.ioの事前に作成されたSVGを使用します。

SVGをHTMLに統合します。

<div class="preloader">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="＆＃039;は、派手ではあるが、複雑でないページローダーを作りましょう">
</div>

.preloader Divはコンテナとして機能し、ページコンテンツの可視性を配置および制御するのを支援します。

さあ、スタイルを整えましょう：

 .preloader {
  Align-Items：Center;
  背景：＃171616; / *濃い灰色の背景 */
  ディスプレイ：Flex;
  高さ：100VH;
  justify-content：center;
  左：0;
  位置：修正;
  上：0;
  遷移：不透明度0.3S線形。
  幅：100％;
  Z-Index：9999;
}

このCSSの重要な側面：

• FlexBoxは、中央のスクリーンの配置を保証します。
• 濃い灰色の背景は、基礎となるコンテンツを完全に曖昧にします。さまざまなページの背景に必要に応じて調整します。
• position: fixedスクロールを防ぎ、 z-index: 9999それがトップにとどまることを保証します。

このセットアップには、スピナーが画面上に中央に表示されます。

滑らかなフェードアウトのためのJavaScript

フェードアウト効果を作成するために、小さなJavaScript関数を使用します。まず、 .preloader要素を選択します。

 const preloader = document.QuerySelector（'。preloader '）;

不透明度をゼロに直接設定する代わりに、よりスムーズな遷移にフェードアウト関数を使用します。

 const fadeeffect = setInterval（（）=> {
  if（！preloader.style.opacity）{
    preloader.style.opacity = 1;
  }
  if（preloader.style.opacity> 0）{
    preloader.style.opacity- = 0.1;
  } それ以外 {
    ClearInterval（fadeeffect）;
  }
}、100）;

この関数は、ゼロに達するまで100ミリ秒ごとに徐々に不透明度を低下させ、停止します。プロジェクトに既に組み込まれている場合は、jQueryの組み込みのフェードアウト関数の使用を検討してください。

最後に、ウィンドウがロードされたら関数を呼び出します。

 window.addeventlistener（ 'load'、fadeeffect）;

window.loadを使用すると、FADEOUTが開始される前にCSSやSVGを含むすべてのページ要素がロードされます。

HTMLにコンテンツを追加し、結果をテストします。このシンプルな方法は、画像、CSS、および小さなJavaScript関数のみを使用して、磨かれた負荷効果を作成します。

以上が＆＃039;は、派手ではあるが、複雑でないページローダーを作りましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。