图片懒加载

最新推荐文章于 2023-11-28 08:23:51 发布

ヽ错落不堪的年华。

最新推荐文章于 2023-11-28 08:23:51 发布

阅读量146

点赞数

分类专栏：技术交流技术总结前端文章标签： html js css

本文链接：https://blog.csdn.net/qq_44777678/article/details/108830447

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<head>
  <style>
    .img {
      width: 200px;
      height: 200px;
      background-color: gray;
      margin-bottom: 20px;
    }

    .pic {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<!-- 图片来自网络，侵删。 -->

<body>
  <div class="container">
    <div class="img">
      <!-- 注意我们并没有为它引入真实的src -->
      <img class="pic" alt="加载中"
        data-src="https://tse1-mm.cn.bing.net/th/id/OIP.8OrEFn_rKe82kqAWFjTuMwHaEo?pid=Api&rs=1" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中"
        data-src="https://ssl.tzoo-img.com/images/tzoo.94911.0.910013.seoul-nami.jpg?width=1080" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中"
        data-src="https://tse4-mm.cn.bing.net/th/id/OIP.ZitgAuABnwkrGn4lid2ZmQHaEK?pid=Api&rs=1" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中" data-src="http://pic34.photophoto.cn/20150315/0034034862056002_b.jpg" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中"
        data-src="http://img.mp.sohu.com/upload/20170724/32d4409f34194b029ed287abf1c99b70_th.png" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075991913520.jpg" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中"
        data-src="https://tse4-mm.cn.bing.net/th/id/OIP.PZdPKj3sXEX2jLrepx3MUwHaEo?pid=Api&rs=1" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075831439349.jpg" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075468043336.jpg" />
    </div>
    <div class="img">
      <img class="pic" alt="加载中"
        data-src="https://tse2-mm.cn.bing.net/th/id/OIP.CRYz5Bv4vylsMh83G4CsLgHaFj?pid=Api&rs=1" />
    </div>
  </div>

  <script>
    // 获取所有的图片标签
    const imgs = document.getElementsByTagName("img");
    // 获取可视区域的高度
    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
    // num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
    let num = 0;

    function lazyload() {
      console.log("滚动...");
      for (let i = num; i < imgs.length; i++) {
        // 用可视区域高度减去元素顶部距离可视区域顶部的高度
        let distance = viewHeight - imgs[i].getBoundingClientRect().top;
        // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
        if (distance >= 0) {
          // 给元素写入真实的src，展示图片
          imgs[i].src = imgs[i].getAttribute("data-src");
          // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
          num = i + 1;
        }
      }
    }

    // 防抖函数
    function debounce(fn, delay = 500) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.call(this, args);
        }, delay);
      };
    }

    // 是的页面初始化是加载首屏图片
    window.onload = lazyload;
    // 监听Scroll事件，为了防止频繁调用，使用防抖函数优化一下
    window.addEventListener("scroll", debounce(lazyload, 600), false);
  </script>
</body>

</html>

ヽ错落不堪的年华。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head>
复制链接

扫一扫