当前位置 主页 > 网站技术 > 代码类 >

    谈谈IntersectionObserver懒加载的具体使用

    栏目:代码类 时间:2019-11-15 15:05

    概念

    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