用intersectionObserver实现懒加载

1.埋点曝光的介绍

埋点曝光:intersectionObserver

intersectionObserver:可以用来异步监听目标DOM元素和祖先元素或视口(viewport)的交叉状态,简单来说,可以检测某个元素是否出现在当前视图内,

在intersectionObserver实例中,包含了一些Api

我们常这么用

var observer = new IntersectionObserver(callback,options);

前一个传参为回调函数,后一个为设置,可不传(有默认的属性值)

 

 

定义一个io 为 intersectionObserver实例

第一个参数传入一个回调函数,需要注意的是在intersectionObserver中,传入回调函数的参数是一个数组,数组中每个属性都是一个IntersectionObserverEntry对象

调用回调函数中的intersectionRatio属性

这个属性的意思是当视图完全不可见的时候,他的值小于等于0

当视图可见的时候,他的值为1

开始监听(io为可见区域div)

 

//每当视图层看到这个区域的时候才会触发(监听)

    io.observe(埋点DIV);

当目标元素的可见性发生变化的时候,就会触发observer,调用里面的回调函数

2.虚拟节点的介绍

1.createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

2:另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，

再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

3.如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

实际使用:
循环里面将大量节点放进虚拟节点fargment中
    fragment.appendChild(li);
在循环外一次性将虚拟节点放入真实节点中
ul.appendChild(fragment);

这样的好处是页面实际上只发生了一次渲染dom节点

 

其实在平时看的网站中也会见到这种技术的应用

如:百度图片:

 

具体表现为:下拉条永远不会拉到底部

完整代码:

 

//先定义三个DIV.其中第一个DIV为我们刚进入页面的时候看到的,然后中间的DIV是拿来做DOM节点的新增的,最底下的DIV用来做埋点

 

每次触发埋点曝光的时候,新增div,同时页码+1

这里可执行任意操作,此案例仅用于参考

实现效果