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

功能介绍

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

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

background Layer 1 没有相交 相交了一半 intersectionRatio为0 intersectionRatio为50% isIntersecting为false isIntersecting为true 全部相交 intersectionRatio为100% isIntersecting为true

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

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

参数配置

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

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

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

background Layer 1 rootMargin:0px 0px 200px 0px; 此时已经相交 rootMargin:0px 0px -200px 0px; 此时没有相交 底部扩展-200px

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

最后

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

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字