遅延読み込みによってPHP Webサイトのアクセス速度を向上させるにはどうすればよいですか?-PHPチュートリアル-php.cn

遅延読み込みによってPHP Webサイトのアクセス速度を向上させるにはどうすればよいですか?

WBOY

リリース： 2023-08-07 11:14:01

オリジナル

740 人が閲覧しました

遅延読み込みによって PHP Web サイトのアクセス速度を向上させるにはどうすればよいですか?

Lazy Loading は、Web サイトのアクセス速度を向上させ、不必要なリソースの読み込みを削減し、ユーザーエクスペリエンスを向上させる一般的な最適化テクノロジです。 PHP Web サイト開発では、通常、画像、ビデオ、スクリプト、その他のリソースの読み込みを遅らせるために遅延読み込みが使用されます。

この記事では、遅延読み込みによって PHP Web サイトのアクセス速度を向上させる方法を紹介し、コード例を使用してそれを示します。

遅延読み込みプラグインライブラリの使用

遅延読み込みには通常、プラグインライブラリの助けが必要です。現在、Lazy Load、Unveil.js など、優れた遅延読み込みライブラリが多数あります。これらのプラグインライブラリは、npm または CDN を通じて導入でき、便利で高速です。

以下は、Lazy Load プラグインライブラリを使用して画像の遅延読み込みを実装するサンプルコードです。

<!-- 在<head>标签中引入Lazy Load插件库 -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>

<!-- 在<img>标签中添加"data-src"属性，将图片的真实地址放到"data-src"中，同时添加"class"属性指定懒加载样式-->
<img class="lazy" data-src="path/to/your/image.jpg" alt="">

<!-- 在<script>标签中初始化Lazy Load插件 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    }
  });
</script>

ログイン後にコピー

上記のサンプルコードでは、<img&gt を追加しました。 ; タグ data-src 属性を追加し、画像の実アドレスを data-src に割り当てます。同時に、遅延読み込みスタイルを指定するための class 属性も追加しました。

<script> タグでは、最初に document.querySelectorAll メソッドを使用して lazy クラスを持つすべての画像を選択し、次にused IntersectionObserver 画像がウィンドウに入るかどうかを監視します。画像がウィンドウに入ると、src 属性の値を更新し、実際の画像アドレスを src に割り当て、lazy クラスを削除して、本当の写真。最後に、observe メソッドを呼び出して、すべての遅延読み込みイメージの監視を開始します。

オーディオおよびビデオリソースの遅延読み込み

画像に加えて、オーディオおよびビデオリソースにも遅延読み込みを使用できます。ページスクロールイベントを監視して、オーディオ要素とビデオ要素がウィンドウ内にあるかどうかを判断し、必要に応じてそれらをロードして再生できます。

以下は、遅延読み込みを使用してビデオの遅延読み込みを実装するサンプルコードです。

<video src="path/to/your/video.mp4" controls muted loop autoplay preload="none" id="lazy-video"></video>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyVideo = document.getElementById("lazy-video");

    window.addEventListener("scroll", function() {
      var rect = lazyVideo.getBoundingClientRect();
      var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
      if (inViewPort) {
        lazyVideo.src = lazyVideo.dataset.src;
      }
    });
  });
</script>

ログイン後にコピー

上記のサンプルコードでは、最初に <video> を追加しました。 tag preload="none"ビデオが自動的にプリロードされないことを指定する属性。次に、<script> タグ内のページスクロールイベントをリッスンし、getBoundingClientRect メソッドを通じて video 要素の位置情報を取得しました。最後に、ビデオがウィンドウ範囲内にあるかどうかを判断し、ウィンドウ範囲内にある場合は、実際のビデオアドレスを src 属性に割り当てて、ビデオのロードと再生を開始します。

遅延読み込みテクノロジーにより、最初のページを読み込む際のリソースの量を削減できるため、PHP Web サイトのアクセス速度が向上し、より良いユーザーエクスペリエンスが提供されます。この記事で紹介した遅延読み込みの原則とサンプルコードがお役に立てば幸いです。

以上が遅延読み込みによってPHP Webサイトのアクセス速度を向上させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。