图片懒加载的方案

白嫖leader

已于 2022-11-12 22:10:21 修改

阅读量417

点赞数 2

分类专栏：笔记文章标签：图片懒加载 IntersectionObserver 滚动事件性能优化资源加载

于 2021-09-11 22:55:11 首次发布

本文链接：https://blog.csdn.net/ksjdbdh/article/details/120244415

版权

笔记专栏收录该内容

82 篇文章 7 订阅

订阅专栏

图片懒加载的方案

方式一
方式二

虽然解决图片懒加载的方式很多，不过大多都万卷不离其中，都是通过控制img的src属性去实现的，下面的两种方式都是通过这个去实现的，不过他们用的api不同。

注意：所谓的浏览器的可视区域指的就是我们肉眼可以看得到的浏览器的区域
如下方被笔圈起来的区域：
在这里插入图片描述

方式一

通过onload去监听页面的滚动事件，然后通过getBoundingClientRect().top拿到每一个图片距离浏览器顶部的距离，如果该距离小于了浏览器可视区域的高度减去400px，那么久当前的img增加src属性，最后通过检测最后一个元素是否有src去检测是否渲染完成，完成的话移除scroll事件，这种方式就是有一个很不好的缺点，如果最后一张图片没有加载完毕的话，他就会一直监听所有的图片，当之前加载过的图片再一次进入可视区域之后就会再次加载一次，如果加载的时候存在有很多复杂切耗时的操作会非常影响性能，不太推荐使用这种方式，不过他也是可以进行图片懒加载的。

<!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">
  <style>
    body {
      height: 2000px;
    }

    * {
      padding: 0;
      margin: 0;
    }

    img {
      display: block;
      width: 300px;
      height: 200px;
    }
  </style>
  <title>第一种</title>
</head>

<body>
  <img data-src="../../img/1.jpg" alt="">
  <img data-src="../../img/2.jpg" alt="">
  <img data-src="../../img/3.jpg" alt="">
  <img data-src="../../img/4.jpg" alt="">
  <img data-src="../../img/5.jpg" alt="">
  <img data-src="../../img/6.jpg" alt="">
  <img data-src="../../img/7.jpg" alt="">
  <div class="a"></div>
  <script>
    let images = document.querySelectorAll('img')
    window.onscroll = function () {
      // console.log(e);
      // console.log(document.querySelector('.a').offsetTop);
      images.forEach((image) => {
        //拿到每一个图片距离浏览器可视区域的顶部的距离
        const imageTop = image.getBoundingClientRect().top
        // 这里减去四百是为了让图片在进入可视区域后，在距离浏览器可视区域底部400px的时候加载图片
        if (imageTop < window.innerHeight - 400) {
          //利用到了原生js的setAttribute
          image.setAttribute('src', image.getAttribute('data-src'))
        }
        // console.log(image.getAttribute('src'));
      })
      // 加载了最后一个图片就不在监听了
      if (images[images.length - 1].getAttribute('src')) {
        window.onscroll = null
      }
    }
  </script>
</body>

</html>

方式二

下面这种方式虽然大家可能没有听说过，但是很方便，值得推荐！！！

var io = new IntersectionObserver(callback, option);

上面代码中，InterpObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选），具体的过程及注释都在代码里了。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

<!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>
    body {
      height: 2000px;
    }

    * {
      padding: 0;
      margin: 0;
    }

    img {
      display: block;
      width: 300px;
      height: 200px;
    }
  </style>
</head>

<body>
  <img data-src="../../img/1.jpg" alt="">
  <img data-src="../../img/2.jpg" alt="">
  <img data-src="../../img/3.jpg" alt="">
  <img data-src="../../img/4.jpg" alt="">
  <img data-src="../../img/5.jpg" alt="">
  <img data-src="../../img/6.jpg" alt="">
  <img data-src="../../img/7.jpg" alt="">
  <script>
    const images = document.querySelectorAll('img')
    //IntersectionObserver检测的是被观察的元素是够进入到了浏览器的可视区
    const observer = new IntersectionObserver((entries) => {
      // console.log(entries); //entries存放着被观察的数组，每调用一次observer.observe方法，那么entries数组的长度就会加一
      entries.forEach(item2 => {
        //通过isIntersecting检测是否进入到了可视区
        // console.log(item2.isIntersecting);
        if (item2.isIntersecting) {
          //通过target获取当前的dom
          item2.target.setAttribute('src', item2.target.getAttribute('data-src'))
        }
      })
    })
    images.forEach((item1) => {
      observer.observe(item1)
    })
  </script>
</body>

</html>

白嫖leader

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片懒加载的方案

图片懒加载的方案方式一方式二虽然解决图片懒加载的方式很多，不过大多都万卷不离其中，都是通过控制img的src属性去实现的，下面的两种方式都是通过这个去实现的，不过他们用的api不同。注意：所谓的浏览器的可视区域指的就是我们肉眼可以看得到的浏览器的区域如下方被笔圈起来的区域：方式一通过onload去监听页面的滚动事件，然后通过getBoundingClientRect().top拿到每一个图片距离浏览器顶部的距离，如果该距离小于了浏览器可视区域的高度减去400px，那么久当前的img增加src属性
复制链接

扫一扫