专栏首页coding个人笔记原生IntersectionObserver交叉观察者

原生IntersectionObserver交叉观察者

前端开发,对于Observer,应该很熟悉,早之前,刚开始开发前端的时候,老是看群里大佬说没有被Observer到,觉得老高大上了。简单解释就是观察者,也就是说没有被监听到,其实跟订阅发布或者观察者模式有点类似。

提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

简单来说就是监听元素出现在根元素,IntersectionObserver接收两个参数,第一个是回调,第二个是配置项:

new IntersectionObserver(handler, options)
let observer = new IntersectionObserver((entries, observer) => {
}, {
 root: null,
 rootMargin: '0px',
 threshold: [0],
});

handler函数有两个参数,一个是监听对象的数组,一个是当前实例

options有三个参数:

root:指定根元素,如果没有指定是默认document

rootMargin:默认0px,比如一个div宽高300px,设置50px的rootMargin,那么就是监听这个div上下左右都减去50px。

threshold:线性升序排序,就是出现到这个元素的百分比的时候就触发回调函数。

然后监听:

observer.observe(document.querySelector('#test1'))

总共有四个方法:

observe()开始监听一个元素,可以同时监听多个

disconnect()停止监听所有

takeRecords()返回所有观察目标的对象数组

unobserve()停止监听特定目标

看一个简单的效果:

看看代码:

let observer = new IntersectionObserver((entries, observer) => {
 let percent = entries[0].intersectionRatio * 100;
 document.getElementById('percent').innerText = parseInt(percent) + '%'
}, {
 root: null,
 rootMargin: '0px',
 threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
});
observer.observe(document.getElementById('test'))

百分比会有一些误差,没办法真正在百分之10这样的时候触发回调,因为IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行。

运用这个api,可以很容易实现懒加载,还有视频往上滑动就暂停,无限滚动等。而且使用这个api最大的优势就是对性能的友好了。当然,兼容性却是一个需要考虑的因素。

最后有个问题,我不知道为什么我初始化之后,一监听就会先进入回调,这个问题没有找到答案。有个群友说根据rxjs的解释,跟热观察和冷观察会有关系,不知道这个api是否是热观察,如果是热观察,那么初始化就会监听。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css样式书写顺序

    我不知道是否有人严格按照一定的顺序来书写css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性书写的顺序对性能有什么影响。

    wade
  • HTML渲染过程

    我们一直在写HTML,关注的一直是界面和功能,很少考虑整个HTML的渲染过程。也是,在开发过程中确实不需要关注这方面,但是知道和理解HTML的渲染过程,对于HT...

    wade
  • 前端路由原理

    对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理。

    wade
  • 使用SAP UI5 Web Components开发React应用

    (1) 命令行 npx create-react-app my-app --template @ui5/cra-template-webcomponents-r...

    Jerry Wang
  • 使用MongoDB提高企业的IT性能

    本文的目标读者是正在为他们的IT系统寻找开源应用的开发人员和架构师。作者描述了一个实际的企业情况,他们在工作流程中采用了MongoDB来加速流程。

    chokwin
  • 社交引擎助力医院CRM全链条服务升级,构建私域流量池,实现业绩长期增长。

    互联网新时代,随着AI人工智能快速普及,5G高速网络的发展,今天很多医院院长也越来越焦虑,碎片化越来越严重,抖音、快手、B站等平台迅速占领C位,传统广告乃...

    用户6962146
  • 博客园美化技巧汇总

    Jetpropelledsnake21
  • 博客园美化大全

    zhang_derek
  • 一种注册表沙箱的思路、实现——注册表的一些基础知识

            要做注册表沙箱,就必须要了解部分注册表知识。而注册表的知识很多,本文主要讲述如何在win32系统是上识别注册表映射的。(转载请指明出处)

    方亮
  • 第11章、数据类型

    关键字 INT 是 INTEGER 的别名,关键字 DEC 和 FIXED 是 DECIMAL的别名。 在 MyISAM/MEMORY/InnoDB和NDB表...

    幺鹿

扫码关注云+社区

领取腾讯云代金券