目录
1.前言
1.1 什么是使用图片懒加载
1.2 为什么使用图片懒加载
1.3 图片懒加载的实现原理
2.实现方法
2.1 利用元素的 getBoundingClientRect 方法实现
2.2 利用整体距离实现
2.3 利用Intersection Observer实现
1.1 什么是使用图片懒加载
懒加载是一种对网页性能优化的方式，比如当访问一个网页的时候，优先显示可视区域的图片而不是一次加载全部的图片，当需要显示时，再发送请求加载图片。
1.2 为什么使用图片懒加载
- 避免首次加载时消耗大量时间，降低页面渲染速度，造成卡顿现象。
- 按需加载，避免无效图片的加载，减轻服务器压力，节约网络资源。
若不使用图片懒加载，页面启动时，会加载全部的图片资源：
1.3 图片懒加载的实现原理
- 基本原理： 监听图片是否位于页面的可视区域内，若在则加载图片，不在则不加载图片
- 实现方案： 自定义属性-将图片真实地址 url 存储在自定义属性中，当监听到图片进入可视区 域 时，将自定义属性值赋值给 img 的 src 属性
2.1 利用元素的 getBoundingClientRect 方法实现
（1）属性介绍：
利用实时获取物体的动态位置
（2）实现方法：
步骤 1：监听页面滚动事件,为页面滚动时的处理函数，在本节为处理图片懒加载。
步骤 2：判断图片是否处于可视区域内
（1）若距离顶部小于页面的整体高度
（2）若距离左侧小于页面的整体宽度
（3）同时图片的底部与图片的右侧 距页面顶部、左侧的距离均大于0
则说明该图在屏幕的可视区域内。
为了提高复用性，我们可以将它封装成一个自定义函数，将每张图片作为参数传入该函数，并返回或
步骤 3：定义图片懒加载时的处理事件，监听所有的,判断该是否处于可视范围内
获取的元素为伪数组 需要转为真数组，否则无法使用数组的某些方法
步骤 4：对每张图片进行监听，利用自定义函数判断是否在可视区域内
（1）若处于可视区域：将自定义的值，赋值给真正的属性值，其中 存储图片的地址，并删除该元素防止重复加载
（2）若不处于可视区域：return 不做处理
（3）整体代码：
2.2 利用整体距离实现
（1）属性介绍：
clientHeight : 网页可见区域高
- A 表示可见区域的高度，包含 不包含 和
- B 语法：
- C 备注： =
innertHeight : window 整体高度
- A 表示的内部高度，包括纵向滚动条
- B 语法：
offsetTop : 距离父级元素顶部的高度
- A 表示当前元素相对于其元素的顶部内边距的距离
- B 语法：
scrollTop : 网页被卷去的距离
- A 表示在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度
- B 语法：
（2）实现方法：
可以用 判断图片是否可以在可视区域内。
- 图片元素位置的顶部距离：
- 滚动距离的最下端：
2.3 利用Intersection Observer实现
是一个比较新的api，他允许你追踪目标元素与其祖先元素或视窗的交叉状态，用他来检测图片是否进入视口非常方便，不用再像之前绑定事件、计算距离等。
（1）属性介绍：
- 利用实例上的和方法，注册或取消监听事件。
- 利用方法，判断该图片是否处于图片与屏幕可视区域的交叉范围内。
- 注意：实例会监听交叉状态，即出现和消失（触发两次），出现交叉状态后会去调用的时候传入的回调函数
（2）实现方法：
步骤 1： 监听页面滚动事件,为页面滚动时的处理函数，在本节为处理图片懒加载。
步骤 2： 创建图片与可视区域交叉实例
：
- 此为传入的回调函数，用于当处于交叉状态改变时进行的处理函数
- 该函数会被触发2次：图片进入视野时+图片离开视野时
步骤 3： 利用实例上的方法，给每张图片绑定观察事件
步骤 4： 定义图片的懒加载事件
:
- 可以获得包含所有图片的属性的集合，该属性可判断是否在交叉区域内
- 为该图片的标签元素
（3）整体代码：
以上就是JavaScript实现图片懒加载的三种常用方法总结的详细内容，更多关于JavaScript图片懒加载的资料请关注脚本之家其它相关文章！
相关文章:
- JavaScript懒加载与预加载原理与实现详解
- 原生JS Intersection Observer API实现懒加载
- 一文搞懂JavaScript如何实现图片懒加载
- 使用jpa的实体对象转json符串时懒加载的问题及解决
- JavaScript懒加载详解
- JS实现图片懒加载(lazyload)过程详解
- JS实现页面数据懒加载
- JavaScript的懒加载处理的方式
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/9707.html