页面图片懒加载

懒加载

         定义: 当我们碰到长网页有很多图片时，我们会采用先加载出现在视口内的几张图片，

         当滚动条滚动到相应图片的位置时才去加载别的图片。这种延迟加载的方式我们就称之为懒加载。

         优点:提升用户体验 减轻服务器压力

         实现原理 : 就是当图片距离浏览器顶部的高度---即getBoundingClientRect().top <= 视口高度  window.innerHeight

 

<style>
      img {
        display: block;
        width: 800px;
        height: 600px;
        margin-bottom: 30px;
      }
    </style>

 <img src="" alt="" data-img="./img/1.jpg" class="lazyImg" />
    <img src="" alt="" data-img="./img/2.jpg" class="lazyImg" />
    <img src="" alt="" data-img="./img/3.jpg" class="lazyImg" />
    <img src="" alt="" data-img="./img/4.jpg" class="lazyImg" />
    <img src="" alt="" data-img="./img/5.jpg" class="lazyImg" />
    <img src="" alt="" data-img="./img/6.jpg" class="lazyImg" />

<script>
      lazyLoad();
      // 懒加载函数
      function lazyLoad() {
        let lazyImg = document.querySelectorAll(".lazyImg");
        lazyImg.forEach((item) => {
          if (isShow(item)) {
            item.src = item.dataset.img;
            // 当加载完成后去除懒加载列表
            item.classList.remove("lazyImg");
          }
        });
      }
      window.addEventListener("scroll", lazyLoad);
      // 判断 是否达到显示条件
      function isShow(item) {
        return item.getBoundingClientRect().top <= window.innerHeight; // 查看效果 可以在后面-180
      }
    </script>