大神杰作：让站点飞快！懒加载图片案例，噢 my gad！太快啦…

作业:懒加载图片

案例效果：

案例源码：

CSS:

 <style>
      .container {
        width: 600px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
      .container img {
        width: 100%;
      }
    </style>

---

HTML:

<div class="container">
      <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
<!-- 中间省略 -->
<!-- 中间省略 -->
<!-- 中间省略 -->
      <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg" />
    </div>

---

JS:

<script>
      // 1 获取图片
      const imgs = document.querySelectorAll(".container img");
      // 2. 视口高度
      const clientHeight = document.documentElement.clientHeight;
      // 3. 监听窗口滚动事件
      window.addEventListener("scroll", lazyload, false);
      // load: 当页面加载成功时自动执行,将已进入可视区的图片显示出来,不要出现首页空白
      window.addEventListener("load", lazyload, false);
      // 4. 懒加载的回调
      function lazyload() {
        // 动态获取滚动高度
        let scrollTop = document.documentElement.scrollTop;
        // 遍历图片,判断是否进入到可视区域
        imgs.forEach((img) => {
          // offsetTop: 是图片距离顶部的高度,包括了视口高度和滚动高度的
          if (img.offsetTop <= clientHeight + scrollTop) {
            img.src = img.dataset.src;
            // 如果感觉图片显示太快,可以用定时器来控制一下
            setTimeout(() => {
              img.src = img.dataset.src;
            }, 500);
          }
        });
      }
    </script>