使用 IntersectionObserver实现图片懒加载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }
      .frist {
        width: 100%;
        height: 100vh;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="frist"></div>
      <div>位置1</div>
      <img src="" data-src="../img/1结果.png" alt="" />
      <div>位置2</div>
      <img src="" data-src="../img/Snipaste_2021-10-18_09-27-06.png" alt="" />
      <div>位置3</div>
      <img src="" data-src="../img//Snipaste_2023-03-27_19-58-56.jpg" alt="" />
      <div>位置4</div>
    </div>

    <script>
      //当监听元素进去可视区域 会触发回调时间
      const observer = new IntersectionObserver((changes) => {
        changes.forEach((change) => {
           
          //isIntersecting 判断是否在可视区域 在为true 不在为false
          if (change.isIntersecting) {
            //获取目标元素
            const img = change.target
            //把目标元素的data-src 的地址赋值给元素的src 加载图片
            img.src = img.dataset.src
            //停止对目标元素的监听
            observer.unobserve(img)
          }
        })
      })
      //查找所有的img标签，对目标标签进行监听
      document.querySelectorAll('img').forEach((item) => {
        observer.observe(item)
      })
    </script>
  </body>
</html>

intersectionObserver Api

图片懒加载的实现思路

使用 IntersectionObserver实现图片懒加载