图片懒加载IntersectionObserver图片懒加载IntersectionObserver图片懒加载Inter

<head>
  <style>
    .viewport {
      width: 300px;
      height: 200px;
      border: 1px solid blue;
      overflow: auto;
    }

    .box1 {
      height: 600px;
      width: 100%;
    }

    .imgs {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="viewport" id="viewport">
    <div class="box1">
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
      <img
        src="./place.jpg"
        data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg"
        alt="图片"
        class="imgs"
      />
    </div>
  </div>
</body>
<script>
  let viewport = document.getElementById('viewport') // 可视区域
  let imgList = document.querySelectorAll('.imgs') // 被观察元素

  let options = {
    root: viewport,
  }
  let IO = new IntersectionObserver(IOCallback, options)

  // 循环所有 img 标签，使它被观察
  imgList.forEach((item) => {
    IO.observe(item)
  })

  function IOCallback(entries, observer) {
    // 循环所有观察元素
    entries.forEach((item) => {
      // 如果出现在可视区内，则替换 src
      if (item.isIntersecting) {
        console.info('出现在可视区内')
        item.target.src = item.target.dataset.src // 替换 src
        IO.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用 callback 函数
      }
    })
  }
</script>