JavaScript：图片懒加载

持久的棒棒君

已于 2023-07-09 09:23:18 修改

阅读量577

点赞数

分类专栏：大杂烩文章标签： javascript 前端图片懒加载

于 2022-09-21 18:01:38 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/126448195

版权

大杂烩专栏收录该内容

261 篇文章 3 订阅

订阅专栏

文章目录

懒加载
1、概念
2、懒加载的处理
3、实现方式
3.1 滚动监听 + scrollTop + offsetTop + innerHeight实现
3.2 滚动监听 + getBoundingClientRect()函数实现
方法介绍

3.3 交叉监听器-intersectionObserve接口实现
接口介绍
构造函数介绍
实例属性和方法

懒加载

1、概念

简单来说，如果打开一个网站时就把图片全部加载好，那么网站性能不不好，用户体验也会较差；但如果我们通过滚动页面，只动态加载窗口视图之内的图片，那么就会提升用户体验，节省流量。

也就是说延迟加载页面中的资源（如图片、视频、音频等），只有当用户滚动到可见区域时才加载这些资源。

2、懒加载的处理

<img  data-src="xxx" src="1px.png" width="100" height="100"/>

1、初始状态：使用 data-src 属性指定资源的真实路径，而 src 或 href 属性为空或占位图像。

2、监听滚动事件：当用户滚动页面时，懒加载脚本会检测可见区域是否有资源需要加载。

3、资源进入可见区域：当用户滚动使得资源进入可见区域时，懒加载脚本会将占位图像替换为真实资源路径，并开始加载资源，也就是将data-src中的值赋值给src或者href属性。

4、加载资源：懒加载脚本通过动态创建 < img >、< video >、< audio> 等标签，或者通过 AJAX 请求加载其他类型的资源。

5、加载完成：一旦资源加载完成，懒加载脚本会更新相应的 DOM 元素，显示真实资源内容。

3、实现方式

懒加载的实现关键在于获取图片元素的位置，判断是否出现在视口中，有如下几种方式

滚动监听 + scrollTop + offsetTop + innerHeight
滚动监听 + getBoundingClientRect()函数
交叉监听器intersectionObserve()函数

3.1 滚动监听 + scrollTop + offsetTop + innerHeight实现

scrollTop：指的是网页中的元素被滚动条滚走的长度
offsetTop：指的是元素相对于父元素的位置
innerHeight：当前窗口大小。（需要注意不同浏览器的兼容性）

innerHeight的兼容性处理：
（1）IE8及更早版本以前没有提供取得浏览器窗口大小的属性，不过提供对应的API：document.documentElement.clientHeight/clientWidth;作用是返回元素内容及其内边距所占据的空间大小。
（2）IE6中，上述属性必须在标准模式才有效，如果是混杂模式，需要通过document.body.clientWidth 和 document.body. clientHeight 取得相同信息。

在这里插入图片描述

<!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>picture lazy load</title>
    <link rel="stylesheet" href="./lazy1.css" />
  </head>
  <body>
    <div class="imgArea">
      <img
        src="./900pxBackground.png"
        data-src="./headPortrait.jpeg"
        alt="图片信息"
        title="head"
        class="hidden lazyLoad"
      />
      <img
        src="./900pxBackground.png"
        data-src="./headPortrait.jpeg"
        alt="图片信息"
        title="head"
        class="hidden lazyLoad"
      />
      <img
        src="./900pxBackground.png"
        data-src="./headPortrait.jpeg"
        alt="图片信息"
        title="head"
        class="hidden lazyLoad"
      />
      <img
        src="./900pxBackground.png"
        data-src="./headPortrait.jpeg"
        alt="图片信息"
        title="head"
        class="hidden lazyLoad"
      />
      <img
        src="./900pxBackground.png"
        data-src="./headPortrait.jpeg"
        alt="图片信息"
        title="head"
        class="hidden lazyLoad"
      />
    </div>
    <script src="./lazy1.js"></script>
  </body>
</html>

css样式

lazy1.css

* {
  margin: 0;
  padding: 0;
}

.imgArea {
  display: grid;
  grid-template: auto;
  gap: 20px 10px;
}

.imgArea > img {
    width: 200px;
    margin:0 auto;
}

.hidden{
    visibility: hidden;
}

懒加载函数

lazy1.js


function lazyLoad() {
    var lazyImages = document.querySelectorAll('.lazyLoad');

    lazyImages.forEach((lazyImage) => {

        // 在视图区间内的图片才被加载出来
        if (lazyImage.offsetTop < (window.innerHeight + window.pageYOffset)) {
            
            // 显示图片（使用定时器模拟网速不行)
            setTimeout(() => {
                lazyImage.setAttribute('src', lazyImage.getAttribute('data-src'))
                // 删除class列表中的hidden属性
                lazyImage.classList.remove('hidden')
            }, 1000)
        }
    })
}

window.addEventListener('load', lazyLoad) // 网页加载时触发
window.addEventListener('resize', lazyLoad) // 改变网页尺寸时触发
window.addEventListener('scroll', lazyLoad) // 滚动页面时触发
window.addEventListener('orientationchange', lazyLoad) // 改变屏幕方向时触发

效果：
请添加图片描述

3.2 滚动监听 + getBoundingClientRect()函数实现

方法介绍

Element.getBoundingClientRect() 方法返回一个对象，这个对象中包含元素的大小以及相对视口的位置（上下左右）
这个对象中的属性包括：

rectObject.top：元素上边到视图上边的距离
rectObject.right：元素右边到视口左边的距离
rectObject.bottom：元素下边到视口上边的距离
rectObject.left：元素左边到视口左边的距离;
rectObject.width：元素自身的宽度
rectObject.height：元素自身的高度

<!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>图片懒加载2</title>
    <style>
        * {
            margin:0;
            padding:0;
        }

        img{
            margin-top :400px;
            width: 250px;
            display: block;
        }
    </style>
</head>
<body>
    <img src="1pxImg.png" data-src="1.webp">
    <img src="1pxImg.png" data-src="2.webp">
    <img src="1pxImg.png" data-src="3.webp">
    <img src="1pxImg.png" data-src="4.webp">
    <img src="1pxImg.png" data-src="5.webp">

    <script>
        var imgs = document.querySelectorAll('img')
        window.onscroll = function(){
            // 获取当前窗口高度
            var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            Array.from(imgs).forEach((item) => {
                // 获取元素相对视口的位置和大小的对象
                let ele = item.getBoundingClientRect()
                console.log(clientHeight,ele.top); // ele.top是指元素到视口顶部的距离

                if(ele.top > 0 && ele.top < clientHeight){
                    // 将data-src中取出真实的图片地址赋值给src
                    item.setAttribute('src',item.getAttribute('data-src'))
                }
            })
        }
    </script>
</body>
</html>

3.3 交叉监听器-intersectionObserve接口实现

接口介绍

IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级视口交叉状态的方法，其祖先元素或视口被称为“根”。

当一个IntersectionObserve交叉观察者对象被创建时，会被配置为监听根中一段给定比例的可见区域。一旦交叉观察者对象被创建，则无法更改其配置，所以一个交叉观察者对象只能用来监听可见区域的特定变化值，但是，可以在同一个观察者对象中监听多个目标元素。

构造函数介绍

IntersectionObserver(callback,option)

该函数有两个参数

callback函数：可见性变化时调用的函数
option：配置对象（可选）

callback函数
是用于观察元素变化的回调函数，通常会触发两次：
1、目标元素刚刚进入视口（开始可见）。
2、完全离开视图（开始不可见）。

callback函数中的参数是一个数组，每个成员都是一个IntersectionObserverEntry对象。这个对象可以提供目标元素的信息，有如下属性：

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，
getBoundingClientRect() 方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null。
boundingClientRect：目标元素的矩形区域的信息
isIntersection：布尔值，表示目标元素是否可见。通常被用来判断目标元素是否进入了可见区域，从而决定是否加载其内容。
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息。
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0，当在0~1之间时表示元素出现在指定可视化范围内。可以利用这个属性来实现更精细的加载策略，比如在目标元素进入可见区域的一段时间内逐渐加载其内容。

options
可选一个可以用来配置 observer 实例的对象。如果options未指定，observer 实例默认使用文档视口作为 root，并且没有 margin，阈值为 0%（意味着即使一像素的改变都会触发回调函数）。可以指定以下配置：

root，监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。

rootMargin 一个在计算交叉值时添加至根的边界盒 (bounding_box (en-US)) 中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的margin 属性等同，默认值是"0px 0px 0px 0px"。

threshold 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。若指定值为 1.0，则意味着整个元素都在可见范围内时才算可见。

返回值
一个可以使用规定阈值监听目标元素可见部分与root交叉状况的新的IntersectionObserver实例。调用自身的observe() 方法开始使用规定的阈值监听指定目标。

// 创建实例
let io = new IntersectionObserver()

实例属性和方法

实例属性：

1、io.root 只读，测试交叉时，用作边界盒的元素或文档。如果构造函数未传入 root 或其值为null，则默认使用顶级文档的视口。

2、io.rootMargin，只读，计算交叉时添加到根边界盒的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。¹

3、io.thresholds，只读，一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0。

实例方法

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察指定目标对象
io.unobserve(element);

// 使io停止监听目标对象
io.disconnect();

// 返回所有观察目标的 IntersectionObserverEntry 对象数组
io.takeRecords()

使用：

<!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: 0;
            padding: 0;
        }

        img {
            margin-top: 400px;
            width: 250px;
            display: block;
        }
    </style>
</head>

<body>
    <img src="1pxImg.png" data-src="1.webp">
    <img src="1pxImg.png" data-src="2.webp">
    <img src="1pxImg.png" data-src="3.webp">
    <img src="1pxImg.png" data-src="4.webp">
    <img src="1pxImg.png" data-src="5.webp">
    <script>
        var imgs = document.querySelectorAll('img')
        // 创建观察期对象
        let io = new IntersectionObserver((entries) => {
        	// entries是一个数组，数组中的元素都是IntersectionObserverEntry对象
            entries.forEach(item => {
            	// 获取被观察的节点
                let oImg = item.target
                // 元素出现在窗口中的处理
                if(item.intersectionRatio > 0 && item.intersectionRatio <= 1){
                    oImg.setAttribute('src',oImg.getAttribute('data-src'))
                }
            })
        })

		// 监视对象为imgs中的元素
        Array.from(imgs).forEach(element => {
            io.observe(element)
        })
    </script>
</body>

</html>

在 IntersectionObserver API 中，rootMargin 属性用于指定一个矩形区域，该区域与浏览器视窗（viewport）的交叉区域称为 viewport margin box。这个交叉区域可以用来调整视窗与目标元素的相交关系。rootMargin 可以接收一个字符串类型的值，值的格式类似于 CSS 的 margin 属性值，例如 “10px 20px 30px 40px” 或 “10% 20% 30% 40%”。
当 IntersectionObserver 注册一个观察目标元素时，它会计算目标元素与 viewport margin box 的相交区域，这个相交区域被称为 root intersection box。rootMargin 属性的值会根据 root intersection box 的大小来进行缩放，从而生成新的交叉区域。如果目标元素与新的交叉区域相交，则触发 IntersectionObserver 的回调函数。
使用 rootMargin 可以让开发者自定义 IntersectionObserver 观察目标元素的相交区域，从而更好地控制目标元素的加载时机和方式。 ↩︎