js如何实现懒加载图片

懒加载图片是一种优化网页性能的技术，它通过延迟加载页面上非关键资源（如图片），直到这些资源即将进入用户的视野范围。以下是关于懒加载图片的基础概念、优势、类型、应用场景以及实现方法：

基础概念

懒加载的核心思想是“按需加载”，即在用户需要查看某个图片时才加载该图片，而不是在页面加载时就加载所有图片。这样可以显著减少初始页面加载时间，提高用户体验。

优势

减少初始加载时间：只加载用户当前可见区域的图片，减少服务器压力和带宽消耗。
提高页面性能：通过减少DOM元素的数量，降低浏览器的渲染负担。
节省流量：对于移动设备用户尤其重要，可以避免不必要的数据消耗。

类型

基于滚动事件的懒加载：监听用户滚动事件，当图片进入视口时加载。
基于Intersection Observer API的懒加载：使用现代浏览器提供的Intersection Observer API来检测元素是否进入视口。
基于预加载的懒加载：预测用户行为，提前加载即将进入视口的图片。

应用场景

电商网站：展示大量商品图片时。
社交媒体平台：如微博、Instagram等，用户滚动浏览时加载更多图片。
新闻网站：长页面文章中包含大量图片。

实现方法

以下是使用JavaScript实现懒加载图片的示例代码：

方法一：基于滚动事件的懒加载

<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<!-- 更多图片 -->

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== "none") {
        img.src = img.dataset.src;
        img.classList.remove("lazy");
      }
    });

    if (lazyImages.length === 0) {
      document.removeEventListener("scroll", lazyLoad);
      window.removeEventListener("resize", lazyLoad);
      window.removeEventListener("orientationChange", lazyLoad);
    }
  }

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationChange", lazyLoad);

  lazyLoad(); // 初始检查
});
</script>

方法二：基于Intersection Observer API的懒加载

<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<!-- 更多图片 -->

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  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("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 回退到基于滚动事件的懒加载
    var lazyLoadThrottleTimeout;

    function lazyLoad() {
      if (lazyLoadThrottleTimeout) {
        clearTimeout(lazyLoadThrottleTimeout);
      }

      lazyLoadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyImages.forEach(function(img) {
          if (img.offsetTop < (window.innerHeight + scrollTop)) {
            img.src = img.dataset.src;
            img.classList.remove("lazy");
          }
        });
        if (lazyImages.length == 0) {
          document.removeEventListener("scroll", lazyLoad);
          window.removeEventListener("resize", lazyLoad);
          window.removeEventListener("orientationChange", lazyLoad);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationChange", lazyLoad);
  }
});
</script>