【JS】两种实现 - 懒加载的方式 - 附无限滚动案例
🦖我是 Sam9029，一个前端
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)
**🐱🐉🐱🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**
懒加载的实现 （两种方式）
方法一：scroll + getBoundingClientRect
方法二：IntersectionObserver（推荐）
codepen 展示
lazyLoad-scroll-getBoundingClientRect-SAM9029lazyload-IntersectionObserver-SAM9029
进阶--利用 getBoundingClientRect 实现图片的无限滚动加载 无限滚动懒加载--getBoundingClientRect
关于上诉 API 在拓展中有使用介绍！！
html+css 代码在文章最后（也可在 codepen 拿到）
一：scroll + getBoundingClientRect
思路：使用 scroll 事件实时检测 目标图像元素的 是否出现的 浏览器（或拥有滑动块的元素）的可视视图内
若是 在浏览器视图内懒加载 利用 window.innerHeight 和 目标图像元素.getBoundingClientReact().top 来作比较
若是 在拥有滑动块元素视图内懒加载 利用 el.offsetHeight 和 目标图像元素.getBoundingClientReact().top 来作比较
😱缺点：懒加载后无法取消监听，浪费性能
codepen 展示
源码:
效果图：（待 gif）
注意 控制台 只要 懒加载完成后，监听依然在执行
二：IntersectionObserver（推荐）
思路：使用 IntersectionObserver （此为构造函数）的 observe 属性方法，判断目标元素是否出现在可视视图中
😱缺点：
暂时没想到（该 API 好像兼容性要考虑），IntersectionObserver 的 unobserve 取消观察完全弥补第一种方法的缺点
codepen 展示
源码:
效果图：（待 gif）
注意 控制台 只要 懒加载完成后，监听就被取消了
拓展
getBoundingClientRect Api
Element.getBoundingClientRect() 是一个
无参普通函数方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于
视口的位置。注意
视口可☞window，也可指具有滚动条的父元素！！！返回值是一个对象,其中有（以下为示意例子）：
IntersectionObserver Api
基本使用讲解：
这个 API 叫做"交叉观察器"： 观察目标元素与视口是否产生一个交叉区
注意：这个 API 是 一个 !!⭐
构造函数,基本语法
let targetImgObserver = new IntersectionObserver(callback, option);callback 必填（用于执行交叉观察函数时，申明做什么操作！！）
option 是配置对象（该参数可选）
该 构造函数 有两个原型的内置方法 (_target 需要被观察的对象节点)
targetImgObserver.observe(_target) : 监听目标对象
targetImgObserver.unobserve(_target) ： 停止监听目标对象（该方法可用在图片加载为成功后执行）
再讲回构造函数的参数
callback回调函数 （理解起来可能有些难，多看几遍参考文章，多写几遍代码！！）callback 函数本省也有 参数
_entries一般写成 箭头函数的形式（见基本使用语法）关于 参数
_entries我们需要知道 这就是构造函数的.observe(_target)方法调用后拿到的 目标对象（可接受为数组形式，即我们多个对象进行了观察，这种情况下很多见，可结合本次例子理解），并可以调用其的观察信息属性常用的
entries.isIntersecting:返回一个布尔值，下列两种操作均会触发 callback：1. 如果目标元素出现在 root 可视区，返回 true。2. 如果从 root 可视区消失，返回 falseentries.target目标元素：即被观察的目标元素基本使用语法
当然，这个 API 的好用之处不止在于用于 懒加载，还用许多场景可用，待探索🤩（可见参考文章）
innerWidht + innerHeight
innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。
innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。
innerWidth 和 innerHeight 是只读属性。
注意：使用 outerWidth 和 outerHeight 属性获取浏览器窗口的宽度与高度。
本文例子所用的 HTML+CSS 源码
无限滚动懒加载效果案例
使用了第一种方式 getBoundingClientRect 加 onscroll 监听实现
第二种
IntersectionObserver同理，可自行拓展实现
源码
🦖我是 Sam9029，一个前端，坚信应无所往
文章若有错误，敬请指正🙏
**🐱🐉🐱🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**Sam9029 的 InfoQ 主页:[Sam9029 (infoq.cn)](
版权声明: 本文为 InfoQ 作者【Sam9029】的原创文章。
原文链接:【http://xie.infoq.cn/article/7c59722a96decd1f302bb1aaf】。文章转载请联系作者。
庸俗 2022.09.03 加入
好色
评论