谈谈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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
详解React 条件渲染
Jul 08 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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函数
2006/10/09 PHP
php中文字符截取防乱码
2008/03/28 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python面向对象特殊成员
2017/04/24 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python实现微信打飞机游戏
2020/03/24 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
结构工程个人自荐信范文
2013/11/30 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
社会公德演讲稿
2014/05/20 职场文书
学校校庆演讲稿
2014/05/22 职场文书
购房委托书
2014/10/15 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
vscode内网访问服务器的方法
2022/06/28 Servers