懒加载大家肯定都有所了解,就是还没有出现的图片先显示一张占位图,等页面滚动到了那里的时候再请求图片的真实src。这个实现起来也不难,就是监听页面的scroll事件,通过判断图片距离页面底部的距离来判断是否出现在屏幕上了。这种思路可以实现,不过缺点就是太耗性能了,现在有一种比较好的方法:IntersectionObserver。今天我们就来看看这个东西咋玩的。

    功能介绍

    IntersectionObserver主要是用来检测一个对象和指定的祖先显示区域(默认为viewport)相交情况的,我们可以先来看看一个简单的demo:

    IntersectionObserver相交测试(ie,safaric不支持)

    上面这个demo中,我们检测的是灰色块和document的相交情况,我们可以发现一旦灰色块出现在屏幕上时,顶部的文字就会显示"目标出现了"。相交的情况大致有以下几种:

    代码方面,主要就是先创建一个检测的对象(new一个IntersectionObserver),然后关联一个对象(observe),一旦这个对象和容器发生相交,那么就会立马被检测到(判断entries中的isIntersecting和intersectionRatio)

    1. var io = new IntersectionObserver(function(entries){
    2.     //entries[0].isIntersecting,判断是否相交
    3.     //entries[0].intersectionRatio,//相交的百分比
    4. });
    5. io.observe(document.getElementById('nb'));//绑定哪个元素
    6. io.unobserve(document.getElementById('nb'));//解绑元素
    7. io.disconnect();//停止检测

    IntersectionObserver在做图片懒加载和无限加载时很有用,先来直接看一下demo:

    IntersectionObserver图片懒加载(ie,safaric不支持)

    IntersectionObserver无限下拉(ie,safaric不支持)

    参数配置

    我们在new IntersectionObserver的时候,可以设置一些参数,大致如下:

    1. var io = new IntersectionObserver(entries=>{
    2. },{
    3.     root:document.getElementById('container'),//设置父容器
    4.     rootMargin:'0px 0px 100px 0px',//设置父容器的检测范围,四个数顺序为上右下左
    5.     threshold:[0,0.25,0.5,1],//设置特定的触发点
    6. });

    root比较好理解,默认就是整个视图区,如果设置了root就是用它的区域。

    rootMargin设置root区域的扩展部分,比如我们做懒加载的时候一般都会有一个预先加载的距离,这个可以通过设置rootMargin:'0px 0px 200px 0px',方向遵从上右下左。这样设置相当于如果一个元素距离底部还有200px就会被检测到。

    threshold这个参数默认是0,表示当刚发生相交的时候会触发这个方法,但是触发后直到离开都不会再次触发了,所以这个参数的作用就是设置一些特定的相交比例,当到了就会自动触发。

    最后

    最后说一下,这玩意ie和safaric都不支持,只能在chrome和ff上玩玩。

    回到顶部
    我要评论

    所有评论

      相关文章