首頁頁面最開始要引入jquery.js

圖片懶加載代碼

<script>
  // 獲取頁面可視區域的高度
  const visibleHeight = window.innerHeight;
  // 獲取頁面上所有圖片的元素
  const imgs = document.querySelectorAll("img");
  // 為每個圖片元素添加 data-src 屬性
  for (const img of imgs) {
    img.setAttribute("data-src", img.src);
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  }

  // 設置閾值和延遲
  const threshold = 100;

  // 節流函數
  let throttleTimeout;
  function throttleScroll() {
    if (throttleTimeout) {
      return;
    }
    throttleTimeout = setTimeout(() => {
      throttleTimeout = null;
      lazyLoad();
    }, 200);
  }

  // 監聽滾動事件
  window.addEventListener("scroll", throttleScroll);

  // 懶加載函數
  function lazyLoad() {
    // 遍歷所有圖片元素
    for (const img of imgs) {
      // 獲取圖片元素的頂部和底部位置
      const rect = img.getBoundingClientRect();
      const top = rect.top;
      const bottom = rect.bottom;

      // 如果圖片元素的頂部或底部位置距離可視區域頂部距離小于閾值
      if ((top <= visibleHeight && bottom >= 0) || (bottom >= 0 && top <= visibleHeight + threshold)) {
        img.src = img.getAttribute("data-src");
      }
    }
  }

  // 初始加載一次
  lazyLoad();
</script>