LazyLoad.js 是一款用于實現圖片懶加載的 JavaScript 庫。通過在頁面滾動時動態加載可見區域的圖片，可以提高頁面加載速度和性能。以下是使用 LazyLoad.js 實現圖片懶加載的基本步驟：
你可以從官方網站（https://github.com/aFarkas/lazysizes）下載 LazyLoad.js 文件，或者通過 CDN 方式引入。將以下代碼添加到 HTML 文件的 <head> 標簽內：
<script src="path/to/lazysizes.min.js" async></script>
在 HTML 文件中，將需要懶加載的圖片的 src 屬性設置為一個占位圖片（例如一個透明的 1x1 像素圖片），并添加一個自定義的屬性 data-src，用于存儲實際圖片的 URL。同時，為每個圖片元素添加一個 lazyload 類：
<img data-src="path/to/your/image.jpg" src="path/to/placeholder.png" class="lazyload" />
在 HTML 文件中添加一個 <script> 標簽，編寫 JavaScript 代碼來初始化 LazyLoad.js。你可以使用以下代碼：
document.addEventListener("DOMContentLoaded", function () {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
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("lazyload");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function (lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
// Implement a different lazy loading strategy here
}
});
這段代碼首先檢查瀏覽器是否支持 IntersectionObserver API。如果支持，就為每個帶有 lazyload 類的圖片創建一個觀察者實例，并在圖片進入視口時加載實際圖片。如果不支持 IntersectionObserver，你需要實現一個兼容的懶加載策略。
現在，當用戶滾動頁面時，LazyLoad.js 將自動加載可見區域的圖片。
