原理

  • 获取当前页面所有的图片标签
  • 获取当前窗口的高度
  • 获取滚动条距离头部的距离
  • 如果当前图片距离顶部的距离小于窗口高度加滚动条滚动距离说明当前图片在视图内，则加载真实的图片地址

页面源码例子如下

<!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>图片懒加载原理</title>
  </head>
  <body>
    <img
      src="https://picsum.photos/200/300?random=1"
      data-src="https://picsum.photos/200/300?random=2"
      alt="图片懒加载原理"
    />
    <img
      src="https://picsum.photos/200/300?random=1"
      data-src="https://picsum.photos/200/300?random=2"
      alt="图片懒加载原理"
    />
    <img
      src="https://picsum.photos/200/300?random=1"
      data-src="https://picsum.photos/200/300?random=2"
      alt="图片懒加载原理"
    />
    <script>
      const imgElement = document.getElementsByTagName("img");
      const imgElementLength = imgElement.length;
      let n = 0;
      const lazyLoad = () => {
        // 可见区域
        let seeHeight = document.documentElement.clientHeight;
        // 滚动条滚动的距离
        let scrollTop =
          document.documentElement.scrollTop || document.body.scroll;

        for (let i = n; i < imgElementLength; i++) {
          // 如果当前图片在窗口视图内 加载真实图片
          if (imgElement[i].offsetTop < seeHeight + scrollTop) {
            if (imgElement[i].getAttribute("src") == "./loading.gif") {
              imgElement[i].src = imgElement[i].getAttribute("data-src");
            }
            n = i + 1;
          }
        }
      };
      // 执行函数
      lazyLoad();
      // 滚动条事件监听图片具体位置
      window.onscroll = lazyLoad;
    </script>
  </body>
</html>
打赏作者
微信
支付宝
返回顶部