这篇文章给大家分享的是有关IntersectionObserver懒加载怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联是专业的东胜网站建设公司，东胜接单;提供网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行东胜网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
概念
IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。
这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛...
重点看这里 监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。
可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。
API
var io = new IntersectionObserver(callback, options)
其实就是一个简单的构造函数。
以上代码会返回一个 IntersectionObserver 实例， callback 是当元素的可见性变化时候的回调函数， options 是一些配置项（可选）。
我们使用返回的这个实例来进行一些操作。
io.observe(document.querySelector('img')) 开始观察，接受一个DOM节点对象
io.unobserve(element) 停止观察 接受一个element元素
io.disconnect() 关闭观察器options
root
用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
threshold
用来指定交叉比例，决定什么时候触发回调函数，是一个数组，默认是 [0] 。
const options = {
root: null,
threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))上面代码，我们指定了交叉比例为0，0.5，1，当观察元素img0%、50%、100%时候就会触发回调函数
rootMargin
用来扩大或者缩小视窗的的大小，使用css的定义方法， 10px 10px 30px 20px 表示top、right、bottom 和 left的值
const options = {
root: document.querySelector('.box'),
threshold: [0, 0.5, 1],
rootMargin: '30px 100px 20px'
}为了方便理解，我画了张图，如下
首先我们来看下图上的问题，蓝线是什么呢？他就是咱们定义的root元素，我们添加了 rootMargin 属性，将视窗的增大了，虚线就是现在的视窗，所以元素现在也就在视窗里面了。
由此可见，root元素只有在 rootMargin 为空的时候才是绝对的视窗。
说了简单的options，接下来我们看下 callback 。
callback
上面我们说到，当元素的可见性变化时，就会触发callback函数。
callback函数会触发两次，元素进入视窗（开始可见时）和元素离开视窗（开始不可见时）都会触发
var io = new IntersectionObserver((entries)=>{
console.log(entries)
})
io.observe($0)以上代码，请在chrome控制台进行调试，这里我使用了 $0 选择了上一次我审查元素的选择的节点
运行结果如下
我们可以看到callback函数有个 entries 参数，它是个 IntersectionObserverEntry 对象数组，接下来我们重点说下IntersectionObserverEntry对象
IntersectionObserverEntry
IntersectionObserverEntry 提供观察元素的信息，有七个属性。
boundingClientRect 目标元素的矩形信息 intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0 intersectionRect 目标元素和视窗（根）相交的矩形信息 可以称为相交区域 isIntersecting 目标元素当前是否可见 Boolean值 可见为true rootBounds 根元素的矩形信息，没有指定根元素就是当前视窗的矩形信息 target 观察的目标元素 time 返回一个记录从 IntersectionObserver 的时间到交叉被触发的时间的时间戳
上面几个矩形信息的关系如下
划重点
intersectionRatio和 isIntersecting是用来判断元素是否可见的，押题咯...
懒加载
好了，通过上面一些概念我们大概了解了 IntersectionObserver 是个什么东西，接下来我们用它来写点代码，写什么呢？没错就是懒加载。
通过IntersectionObserver来实现懒加载，就简单的多了，我们只需要设置回调，判断当前元素是否可见，再进行渲染操作就行了，而不用去关心内部的计算。
主要代码如下
const io = new IntersectionObserver(()=>{ // 实例化 默认基于当前视窗
})
let ings = document.querySelectorAll('[data-src]') // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src
function callback(entries){
entries.forEach((item) => { // 遍历entries数组
if(item.isIntersecting){ // 当前元素可见
item.target.src = item.target.dataset.src // 替换src
io.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用callback函数
}
})
}
imgs.forEach((item)=>{ // io.observe接受一个DOM元素，添加多个监听 使用forEach
io.observe(item)
})本想录制个GIF图，使用Recordlt始终上传不了，谁有好用的GIF图录制软件请推荐个，不胜感激。。
呐，给你花:rose:
因篇幅有限，完整代码请戳 github
注意
目前IntersectionObserver是一个实验中的功能，请酌情使用。
感谢各位的阅读！关于“IntersectionObserver懒加载怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
