图片懒加载（替换src的方式实现）

懒加载 lazyload

懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的首屏图片就先加载，而其他的图片，等到需要去展示的时候再去请求图片资源。

目的：更好的加载页面的首屏内容，对于含有不少图片的比较长的网页来讲，能够加载的更快，避免了首次打开时，一次性加载过多图片资源，是对网页性能的一种优化方式。

原理：浏览器解析到img标签的src有值，才会去发起请求，那么就可以让图片需要展示时，才对其src赋值真正的图片地址。

实现代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        margin: 50px;
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="loading.gif"
        alt=""
        data-src="1.jpg"
       
      />
    </div>
    <div>
      <img
        src="loading.gif"
        alt=""
        data-src="2.jpg"
       
      />
    </div>
    <div>
      <img
        src="loading.gif"
        alt=""
        data-src="3.jpg"
       
      />
    </div>
    <div>
      <img
        src="loading.gif"
        alt=""
        data-src="4.jpg"
       
      />
    </div>
    <div>
      <img
        src="loading.gif"
        alt=""
        data-src="5.jpg"
       
      />
    </div>
    <script>
      const imgs = [...document.querySelectorAll(".lazyload")]; //img元素转换成数组
      lazyload();  //初始调用一次
      window.addEventListener("scroll", lazyload, false);  //监听滚动时也调用lazyload函数，冒泡阶段
      //懒加载
      function lazyload() {
        for (let i = 0; i < imgs.length; i++) {
          const $img = imgs[i];          //每次循环拿到每一个img元素
          if (isInVisibleArea($img)) {   //判断img元素是否在可视区域内
            $img.src = $img.dataset.src; //用data-src替换src属性
            imgs.splice(i, 1);           //对应该索引的元素删掉
            i--;  
          }
        }
      }
      // 判断DOM元素是否在可视区域内，返回true/false
      function isInVisibleArea($el) {
        const rect = $el.getBoundingClientRect();
        console.log(rect);
        return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
      }
    </script>
  </body>
</html>

实现细节

如何加载图片

用img的data-src属性存放真正需要显示的图片的路径，当页面滚动直到图片出现在可视区域，