首页页面最开始要引入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>