首页 前端知识 使用IntersectionObserver替代判断是否在可视区域

使用IntersectionObserver替代判断是否在可视区域

2024-02-28 11:02:58 前端知识 前端哥 504 458 我要收藏

前言

在日常的开发过程中,有时候会有一些要求判断节点是否进入可视化区域的需求。例如:判断信息是否在可视区域曝光再进行曝光,图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。

el.offsetTop - document.documentElement.scrollTop <= 视口高度
// 或
el.getBoundingClientRect().top <= 视口高度

但是scroll,getBoundingclient会引起回流,计算过于频繁可能会引起很大的性能问题,例如用户在使用的过程中,滑动卡顿啊等。那么有没有更好的办法来代替判断是否进入可视化区域呢?使用IntersectionObserver即可解决这种烦恼。

概念

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。浏览器显示页面的时候,首先会用js处理逻辑,然后进行样式计算及布局,在内存里面形成之后会画我们的屏幕上去,这一个过程就叫1帧,如果1帧中任一个阶段占用的时间过长,就会影响到我们的平均帧率,导致掉帧等。而IntersectionObserver会在浏览器空闲的时候,也就是帧空闲的时候才去执行,不会一直占用我们的主线程,从而提高了性能及体验。

使用

IntersectionObserver接收2个参数callback和options。具体可见MDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2874.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!