LazyLoad.js 是一款用于實現圖片懶加載的 JavaScript 庫，它可以讓頁面在滾動時按需加載圖片，從而提高頁面加載速度和用戶體驗。以下是如何使用 LazyLoad.js 提升用戶體驗的方法：
下載并引入 LazyLoad.js： 首先，從官方網站（https://github.com/aFarkas/lazysizes）下載 LazyLoad.js 文件，然后將其引入到 HTML 頁面中，可以通過 script 標簽直接引入或者使用模塊打包工具（如 Webpack）進行引入。
使用 data-src 屬性： 在 img 標簽中，不要直接使用 src 屬性，而是使用 data-src 屬性來存儲圖片的真實 URL。這樣，LazyLoad.js 會在圖片進入視口時替換 data-src 的值為真實的 src。
示例：
<img data-src="https://example.com/path/to/image.jpg" alt="Example Image" />
初始化 LazyLoad.js： 在頁面加載完成后，使用 LazyLoad.js 的 lazyload() 方法初始化懶加載。這可以通過在 script 標簽中添加一個回調函數來實現，或者使用 jQuery 等庫的 DOMContentLoaded 事件。
示例：
document.addEventListener("DOMContentLoaded", function() {
lazyload();
});
優化配置選項： LazyLoad.js 提供了一些配置選項，可以根據需要進行自定義。例如，可以設置占位符圖片、預加載圖片數量、滾動行為等。具體配置選項可以參考官方文檔（https://github.com/aFarkas/lazysizes#options）。
結合 CSS 優化： 為了更好地提升用戶體驗，可以結合 CSS 來優化懶加載圖片的顯示效果。例如，可以設置占位符圖片的樣式，使其在圖片加載前占據一定的位置；還可以設置圖片的過渡效果，使圖片加載更加平滑。
通過以上方法，可以使用 LazyLoad.js 實現圖片懶加載，從而提高頁面加載速度和用戶體驗。
