LazyLoad.js如何實(shí)現(xiàn)圖片懶加載

小樊
81
2024-10-16 18:29:16

LazyLoad.js 是一款用于實(shí)現(xiàn)圖片懶加載的 JavaScript 庫(kù)。通過(guò)在頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)加載可見(jiàn)區(qū)域的圖片，可以提高頁(yè)面加載速度和性能。以下是使用 LazyLoad.js 實(shí)現(xiàn)圖片懶加載的基本步驟：

  1. 引入 LazyLoad.js 庫(kù)

你可以從官方網(wǎng)站（https://github.com/aFarkas/lazysizes）下載 LazyLoad.js 文件，或者通過(guò) CDN 方式引入。將以下代碼添加到 HTML 文件的 <head> 標(biāo)簽內(nèi)：

<script src="path/to/lazysizes.min.js" async></script>
  1. 標(biāo)記需要懶加載的圖片

在 HTML 文件中，將需要懶加載的圖片的 src 屬性設(shè)置為一個(gè)占位圖片（例如一個(gè)透明的 1x1 像素圖片），并添加一個(gè)自定義的屬性 data-src，用于存儲(chǔ)實(shí)際圖片的 URL。同時(shí)，為每個(gè)圖片元素添加一個(gè) lazyload 類：

<img data-src="path/to/your/image.jpg" src="path/to/placeholder.png" class="lazyload" />
  1. 初始化 LazyLoad.js

在 HTML 文件中添加一個(gè) <script> 標(biāo)簽，編寫(xiě) JavaScript 代碼來(lái)初始化 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。如果支持，就為每個(gè)帶有 lazyload 類的圖片創(chuàng)建一個(gè)觀察者實(shí)例，并在圖片進(jìn)入視口時(shí)加載實(shí)際圖片。如果不支持 IntersectionObserver，你需要實(shí)現(xiàn)一個(gè)兼容的懶加載策略。

現(xiàn)在，當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，LazyLoad.js 將自動(dòng)加載可見(jiàn)區(qū)域的圖片。

0 踩