谈谈IntersectionObserver懒加载的具体使用


Posted in Javascript onOctober 15, 2019

概念

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。

这是MDN上给的官方概念,不用去管它,我粘出来只是为了显得专业点嘛...

重点看这里 监听目标元素与其祖先或视窗交叉状态的手段 ,其实就是观察一个元素是否在视窗可见。

谈谈IntersectionObserver懒加载的具体使用

可以看到,交叉了就是说明当前元素在视窗里,当前就是可见的了。

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'
}

为了方便理解,我画了张图,如下

谈谈IntersectionObserver懒加载的具体使用

首先我们来看下图上的问题,蓝线是什么呢?他就是咱们定义的root元素,我们添加了 rootMargin 属性,将视窗的增大了,虚线就是现在的视窗,所以元素现在也就在视窗里面了。

由此可见,root元素只有在 rootMargin 为空的时候才是绝对的视窗。

说了简单的options,接下来我们看下 callback

callback

上面我们说到,当元素的可见性变化时,就会触发callback函数。

callback函数会触发两次,元素进入视窗(开始可见时)和元素离开视窗(开始不可见时)都会触发

var io = new IntersectionObserver((entries)=>{
	console.log(entries)
})

io.observe($0)

以上代码,请在chrome控制台进行调试,这里我使用了 $0 选择了上一次我审查元素的选择的节点

运行结果如下

谈谈IntersectionObserver懒加载的具体使用

我们可以看到callback函数有个 entries 参数,它是个 IntersectionObserverEntry 对象数组,接下来我们重点说下IntersectionObserverEntry对象

IntersectionObserverEntry

IntersectionObserverEntry 提供观察元素的信息,有七个属性。

boundingClientRect 目标元素的矩形信息 intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0 intersectionRect 目标元素和视窗(根)相交的矩形信息 可以称为相交区域 isIntersecting 目标元素当前是否可见 Boolean值 可见为true rootBounds 根元素的矩形信息,没有指定根元素就是当前视窗的矩形信息 target 观察的目标元素 time 返回一个记录从 IntersectionObserver 的时间到交叉被触发的时间的时间戳

上面几个矩形信息的关系如下

谈谈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懒加载的具体使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
Javascript的this用法
Jan 16 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
javascript网页随机点名实现过程解析
Oct 15 #Javascript
javascript随机变色实例代码
Oct 15 #Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Python struct模块解析
2014/06/12 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
介绍一下代理模式(Proxy)
2014/10/17 面试题
写给女生的道歉信
2014/01/08 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
法学个人求职信范文
2014/01/27 职场文书
社区志愿者活动方案
2014/08/18 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
行政复议决定书
2015/06/24 职场文书
解除合同协议书范本
2016/03/21 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
MySQL数据库事务的四大特性
2022/04/20 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android