前端图片懒加载的实现方式

什么是图片懒加载：

前端图片懒加载是一种优化网页性能的技术，它可以延迟加载页面中的图片，直到用户即将看到它们为止。这样可以减少初始页面加载时需要下载的资源量，提高页面加载速度。

实现方式：

1. 将图片的真实URL存储在自定义的属性中，例如data-src，而不是src属性。
2. 页面初始加载时，所有图片的src属性设置为空或者一个占位图片的URL。
3. 使用JavaScript监听滚动事件，当图片进入可视区域时，将data-src属性的值赋给src属性，从而触发图片的加载。

简单代码如下 ：

<!-- HTML结构 -->
<img data-src="real-image-url.jpg" src="placeholder.jpg" class="lazy-load" alt="Lazy-loaded Image">

<!-- JavaScript代码 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll(".lazy-load");

    function lazyLoad() {
      lazyImages.forEach(function(img) {
        if (isElementInViewport(img) && img.getAttribute("data-src")) {
          img.src = img.getAttribute("data-src");
          img.removeAttribute("data-src");
        }
      });
    }

    function isElementInViewport(el) {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight)
      );
    }

    // 初次加载时触发一次懒加载
    lazyLoad();

    // 滚动事件触发懒加载
    window.addEventListener("scroll", lazyLoad);
  });
</script>