日本語
日本語
Lazy Loadingは、Webサイトのアクセス速度を向上させ、帯域幅の消費を削減し、非批判的なリソースの読み込みを遅らせることでユーザーエクスペリエンスを改善できるWebパフォーマンス最適化テクノロジーです。 PHP Webサイトの開発では、通常、怠zyな読み込みは、写真、オーディオ、ビデオ、その他の大きなファイルリソースの読み込みの遅延に使用されます。
この記事では、例を使用して、Webサイトのアクセス速度を向上させるためにPHP Webサイトに怠zyな読み込みを実装する方法を説明します。
怠zyなロードの実装は、通常、怠zyなロード、unveil.jsなどのサードパーティのプラグインライブラリに依存します。これらのライブラリは、簡単かつ迅速に使用するためにNPMまたはCDNを介して導入できます。
怠zyなロードプラグインを使用して怠zyな画像読み込みを実装するための例コードは次のとおりです。
<!-- 存在する<head>タグで紹介しましたLazy Loadプラグインライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>
<!-- 存在する图片标签真ん中添加data-src財産，実際のイメージアドレスを入れますdata-src真ん中，も追加lazy親切 -->
<img class="lazy" data-src="path/to/your/image.jpg" alt="サンプル画像" />
<!-- 初期化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>上記の方法により、実際の画像は、画像がユーザーウィンドウに入るときにのみロードされ、それによりページの初期読み込み時間が短縮されます。
怠zyなロードは、写真だけでなく、オーディオおよびビデオリソースにも適しています。ページのスクロールイベントを監視することにより、要素がウィンドウの範囲内にあるかどうかを判断し、オーディオとビデオのコンテンツを動的にロードして再生します。
これが怠zyなビデオの読み込み例です。
<video controls muted loop autoplay preload="none" id="lazy-video" data-src="path/to/your/video.mp4"></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>この例では、ビデオタグはPreload = "None"を使用して、リソースの自動ロードを避けます。ユーザーがページをスクロールし、ビデオがウィンドウに入ると、ビデオがロードと再生を開始し、ページの初期ロード圧力を効果的に削減します。
怠zyなロードテクノロジーは、PHP Webサイトによって最初にロードされたリソースの量を大幅に削減でき、それによりアクセス速度が向上し、ユーザーエクスペリエンスを最適化できます。この記事の例は、写真とオーディオとビデオの怠zyな読み込み方法を示しています。開発者は、ウェブサイトのパフォーマンスをさらに向上させるために、ウェブサイトに従って柔軟に適用できます。
