图片懒加载 | cvl

IntersectionObserver 实现图片懒加载
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IntersectionObserver</title>
    <style>
      .image p {
        width: 300px;
        height: 400px;
        overflow: hidden;
        background-color: #ddd;
      }
      .image img {
        display: block;
        width: 100%;
        height: 450px;
        transition: 0.3s;
        opacity: 0;
        transform: scale(0.95) translateY(0);
      }
      .image img.show {
        opacity: 1;
        transform: scale(1) translateY(-10px);
      }
    </style>
  </head>
  <body>
    <div class="image-container">
      <div class="image">
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_6eb6.jpg" /></p>
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_f7c0.jpg" /></p>
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_e98f.jpg" /></p>
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_10cc8.jpg" /></p>
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_f570.jpg" /></p>
        <p><img data-src="http://starloopfilm.com/assets/pic/b99f/de7f/thumb_27d5.jpg" /></p>
      </div>
    </div>
    <script>
      const imgs = document.querySelectorAll("img")

      const observer = new IntersectionObserver((changes) => {
        changes.forEach((change) => {
          let el = change.target
          if (change.isIntersecting) {
            el.src = el.dataset.src
            el.className = "show"
          } else {
            el.className = ""
          }
        })
        // observer.unobserve(el)
      })
      imgs.forEach((img) => observer.observe(img))
    </script>
  </body>
</html>