<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes" {/IF}>

<head>

  <meta charset="UTF-8">

  <meta name="robots" content="noindex">

</head>

<body>

  <div class="girls-list-wrap">
   
    <img data-src="https://shuliqi.github.io/xiaozhan/1.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/2.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />

    <img data-src="https://shuliqi.github.io/xiaozhan/3.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/4.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />

    <img data-src="https://shuliqi.github.io/xiaozhan/5.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
     <img data-src="https://shuliqi.github.io/xiaozhan/11.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/6.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />

    <img data-src="https://shuliqi.github.io/xiaozhan/7.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/8.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/9.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
    <img data-src="https://shuliqi.github.io/xiaozhan/10.jpeg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" />
  </div>

</body>

</html>
    .girls-list-wrap {
      width: 500px;
      height: 400px;
      overflow-y: auto;
      margin: 10% auto;
      border: 2px solid #000;
    }
    img {
      width: 300px;
      height: 300px;
      display: block;
      border: 2px solid #000;
      margin: 10px auto;
    }
const io = new IntersectionObserver(callback);
    let imgs = document.querySelectorAll("[data-src]"); // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src
    function callback(entries) {
      entries.forEach((item) => {
        // 遍历entries数组
        if (item.isIntersecting) {
          // // 当前元素可见
          item.target.src = item.target.dataset.src; // 替换src
          io.unobserve(item.target); // 停止观察当前元素 避免不可见时候再次调用callback函数
        }
      });
    }

    // io.observe接受一个DOM元素，添加多个监听 使用forEach
    imgs.forEach((item) => {
      io.observe(item);
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.