遅延読み込みによってPHP Webサイトのアクセス速度を向上させるにはどうすればよいですか?
- WBOYオリジナル
- 2023-08-07 11:13:05709ブラウズ
遅延読み込みによって 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>上記のサンプル コードでは、22bdb26f24896f828758bd7b25685269 タグでは、最初に 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>上記のサンプル コードでは、最初に 39000f942b2545a5315c57fa3276f220 を追加しました。 tag preload="none"ビデオが自動的にプリロードされないことを指定する属性。次に、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内のページ スクロール イベントをリッスンし、getBoundingClientRect メソッドを通じて video 要素の位置情報を取得しました。最後に、ビデオがウィンドウ範囲内にあるかどうかを判断し、ウィンドウ範囲内にある場合は、実際のビデオ アドレスを src 属性に割り当てて、ビデオのロードと再生を開始します。
遅延読み込みテクノロジーにより、最初のページを読み込む際のリソースの量を削減できるため、PHP Web サイトのアクセス速度が向上し、より良いユーザー エクスペリエンスが提供されます。この記事で紹介した遅延読み込みの原則とサンプルコードがお役に立てば幸いです。
以上が遅延読み込みによってPHP Webサイトのアクセス速度を向上させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。