Fork me on GitHub

图片懒加载

字数统计: 1.2k字   |   阅读时长≈ 6分

图片懒加载： 在页面长列表展示时（就说页面很长出现滚动条那种🤡），在页面不可见区域的图片资源默认不加载。当图片元素滚动到可视区域时再加载图片资源的这么个效果

实现方式：

  1. 位置计算 + 滚动事件 (Scroll) + DataSet API

    通过对元素的位置属性 clientTop，offsetTop，clientHeight以及scrollTop等 再加上监听滚动条的事件来判断图片资源是否出现在可视区域

  2. getBoundingClientRect API + Scroll with Throttle + DataSet API

    Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。此方式其实与第一种类似，只是借助了 getBoundingClientRect 方法 获取元素位置的值，简化了操作

    下面看一个示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    // html 部分

    <!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>
          * {
            margin: 0px;
            padding: 0px;
          }

          body {
            margin: 0px;
            padding: 0px;
          }
          .demo {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
          }
          .imgbox {
            width: 100%;
            height: fit-content;
            border: 1px solid skyblue;
            box-sizing: border-box;
          }
          img {
            display: block;
            width: 100%;
            height: fit-content;
            min-height: 250px;
          }
        </style>
      </head>

      <body>
        <div class="demo">
          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg" alt="1" />
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg" alt="2"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="3"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="4"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg" alt="5"/>
          </div>
          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg" alt="1" />
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg" alt="2"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="3"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="4"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg" alt="5"/>
          </div>
          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg" alt="1" />
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg" alt="2"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="3"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="4"/>
          </div>

          <div class="imgbox">
            <img data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg" alt="5"/>
          </div>
        </div>
      </body>

    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    // js 部分

      <script>
        const demo = document.querySelectorAll("img");
        function lazy() {
          // 遍历所有图片资源
          for (let elem of demo) {
            // 判断是否出现在可视区域
            // 图片距离可视区域顶部距离 < 可视区域高度（文档节点可视高度）
            if ( elem.getBoundingClientRect().top < document.documentElement.clientHeight ) {
              // 没有 src 属性的图片 此时加载
              if (elem.dataset.src && elem.src == "") {
                elem.src = elem.dataset.src;
              }
            }
          }
        }
    	// 一个节流函数
        function throttle(t, fn) {
          let time;
          return function () {
            if (!time) {
              time = setTimeout(() => {
                time = null;
                fn();
              }, t);
            }
          };
        }
        lazy();
        window.addEventListener("scroll", throttle(500, lazy));
      </script>

  3. IntersectionObserver API + DataSet API

    IntersectionObserver API，一个能够监听元素是否到了当前视口的事件，一步到位！ 此API 大大简化了上述一系列操作 监听滚动变化与判断是否出现在可视区域一把梭😊

    示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script>
        const observer = new IntersectionObserver((changes) => {
            // changes: 目标元素集合
            changes.forEach((change) => {
                console.log(change.isIntersecting);
                // intersectionRatio
                if (change.isIntersecting) {
                    const img = change.target;
                    img.src = img.dataset.src;
                    // 图片加载后注销监听
                    observer.unobserve(img);
                }
            });
        }, {
            threshold: 0.8 // 元素百分之多少暴露在可视区域时才触发
        });

    	// 
        document.querySelectorAll('img').forEach(img=> {
            observer.observe(img);
        })
    </script>

  4. LazyLoading 属性

    给需要懒加载的图片添加 loading=”lazy” ，浏览器自己做懒加载这件事。不过目前浏览器兼容性不太好

    1
    <img src="shanyue.jpg" loading="lazy" />

结语：总的来看方案三最好使了，不过方案二兼容性比方案三好

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。