IntersectionObserver介绍

PAMPANG 发布于2019-08-23 12:34 / 1001人阅读

摘要：允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有一部分元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。即只有线程空闲下来，才会执行观察器。

允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有一部分元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。

IntersectionObserver 为什么需要它？

在我们需要监听目标元素是否进入视口时，需要监听scroll事件，大量的计算会造成性能问题

IntersectionObserver 怎么解决这个问题？

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

IntersectionObserverEntry 对象

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log("我出来了");
        }else{
            console.log("我隐藏了");
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector(".scroll-down"))

IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性。

{
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0   
}

options 主要有

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

实例方法 observe()

观察某个目标元素，一个观察者实例可以观察任意多个目标元素。注意，这里可能有同学会问：能不能 delegate？能不能只调用一次 observe 方法就能观察一个页面里的所有 img 元素，甚至那些未产生的？答案是不能，这不是事件，没有冒泡。

unobserve()

取消对某个目标元素的观察，延迟加载通常都是一次性的，observe 的回调里应该直接调用 unobserve() 那个元素.

disconnect()

取消观察所有已观察的目标元素

takeRecords()

理解这个方法需要讲点底层的东西：在浏览器内部，当一个观察者实例在某一时刻观察到了若干个相交动作时，它不会立即执行回调，它会调用 window.requestIdleCallback() （目前只有 Chrome 支持）来异步的执行我们指定的回调函数，而且还规定了最大的延迟时间是 100 毫秒，相当于浏览器会执行：

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

GPU云服务器云服务器 IntersectionObserver 自我介绍平台介绍相关介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98741.html

Javascript零碎之IntersectionObserver

摘要：主要用于元素可见性的监听，比传统通过全局监听事件去判断可见性无论是性能还是便利性都要好得多。问题是这种通过监听的方式很容易导致性能问题，或者多多少少会有些性能损失。 IntersectionObserver主要用于元素可见性的监听，比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新，存在兼容性问题，好在已经有了兼容的polyfill.其基本介...

张迁 2019-08-23 18:24 评论0 收藏0
【前端词典】5 种滚动吸顶实现方式的比较[性能升级版]

摘要：用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题，在微信浏览器某些版本中的值会为，于是乎也就有了第三种方案的兼容性写法。修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加...

happyfish 2019-05-23 17:31 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

lidashuang 2019-08-22 16:24 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

K_B_Z 2019-08-02 10:14 评论0 收藏0