谈谈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 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
javascript去除空格方法小结
May 21 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
Node.js的特点详解
Feb 03 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 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
php微信公众平台开发类实例
2015/04/01 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript 自定义回调函数示例代码
2014/09/26 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
python中实现精确的浮点数运算详解
2017/11/02 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
MySQL面试题
2014/01/12 面试题
参观考察邀请函范文
2014/01/29 职场文书
战略合作意向书范本
2014/04/01 职场文书
实践单位评语
2014/04/26 职场文书
科技工作者先进事迹
2014/08/16 职场文书
档案工作汇报材料
2014/08/21 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技