IntersectionObserver与元素可见性

最新推荐文章于 2023-12-12 14:45:52 发布
最新推荐文章于 2023-12-12 14:45:52 发布
阅读量370 收藏
点赞数
分类专栏： 原生JS 系统默认 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gong_zhe_511/article/details/119250664
版权

场景

页面上控件的嵌套层级较深的情况下, 如果一次全部渲染出来, 会导致页面卡顿. 而此时需要懒加载.

懒加载的定义

视窗之外的控件不加载, 等当前控件滚动到视窗内后, 再进行加载.

如何判定控件在视窗范围内

使用IntersectionObserver

IntersectionObserver原理

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

参数

IntersectionObserver有两个参数, callback和options
callback,顾名思义就是该API的回调, 用于处理自己的业务逻辑. 该回调也接收一个参数: entries, 该参数是一个数组, 会将监听的所有DOM, 经过包装后, 形成一个API, 这里面有几个常用的参数.
下面给出TS的定义


interface DomRect {
    width: Number,
    height: Number,
    left: Number,
    top: Number,
    bottom: Number,
    right: Number,
    y: Number,
    x: Number,
}

const intersectionRatioSize = <const>[0, 1]

interface IntersectionObserverEntry {
    boundingClientRect: DomRect,
    // 取值在0 - 1之间, 0即不可见, 1是可见
    intersectionRatio: intersectionRatioSize[number],
    // 交叉的一瞬间, 当前被观测DOM, 在视窗内的大小
    intersectionRect: DomRect,
    isIntersecting: Boolean,
    isVisible: Boolean,
    rootBounds: DomRect,
    target: HTMLElement,
    // 触发回调时,距离当前页面初始打开时的时间间隔, 单位是毫秒(ms)
    time: Number
}

interface Options {
    threshold: Number [],
    rootMargin: String,
    delay: number,
    trackVisibility: Boolean,
    root: HTMLElement
}

type callback = (entry: IntersectionObserverEntry [], options?: any )=>void(null)

如何使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IntersectionObserver</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    #div {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        margin-left: 1000px;
        margin-top: 900px;
    }
</style>
<body>
    <div id="div"></div>
</body>
<script>

  const div = document.getElementById('div')
  const options = {
    threshold: [0.000001],
    rootMargin: '-5px 0px 0px 0px',
    delay: 300,
    trackVisibility: true
  }
  let prevIntersectionRatio = 1
  const callback = (entries, p2) => {
    // 最多接收两个参数, 第二个参数是配置信息Options
    console.log(entries, p2)
    entries.forEach(entry => {
      if (entry.intersectionRatio === prevIntersectionRatio) {
        return
      }
      // 如果当前的entry.intersectionRatio为1,表示可见; 为0不可见
      prevIntersectionRatio = entry.intersectionRatio
      // 下面是业务代码
    })
  }
  const observer = new window.IntersectionObserver(callback, options)
  observer.observe(div)
</script>
</html>
门_玻璃_天花板
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域
Kate_sicheng的博客
10-11 357
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。
监听弹窗 - 动态优先级
weixin_47521346的博客
01-26 827
最近接到新手引导的需求中，由于新手引导浮窗可以拖拽到页面任何位置，要求它的优先级必须高于页面元素，但又不能高于其他弹窗蒙层，否则会和其他弹窗共存。因此，需要监听当前是否有弹窗，来实现动态优先级，在有弹窗的时候，让新手引导浮窗优先级动态降低。
window的IntersectionObserver特性使用
var_deng的博客
08-03 681
前言 翻vant源码，看到有使用IntersectionObserver属性，才疏学浅的我居然不知道是啥玩意，百度一番，确实是个好东西！ IntersectionObserver主要用于元素可见性的监听，比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新，存在兼容性问题，好在已经有了兼容的polyfill.其基本介绍和使用方式都可以在该polyfill对应网站上看到。 使用场景 1.图片懒加载 监听scroll方式（旧）： window.addEventLis
IntersectionObserver学习笔记，再也不用用scroll去做缓加载和无限滚动啦（如果不用IE的话。。）
zem
06-17 5489
IntersectionObserver可以实现类似于监听目标元素的祖先元素与视窗的交叉状态，简单地说就是能监听到某个元素是否会被我们看到，当我们看到这个元素时，可以执行一些回调函数来处理某些事务。 IntersectionObserver的小试验 <!DOCTYPE html> <html lang="en"> <head> <meta ...
利用IntersectionObserver监听图片是否在当前视窗内
shibaweijin的博客
05-20 279
created() { let options = { root: null, rootMargin: "0px", threshold: [0, 0.8], }; this.intersectionObserver = new window.IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.target ==
vue3+ts+IntersectionObserver实现图片懒加载
m0_56274171的博客
10-11 315
vue3+ts+IntersectionObserver实现图片懒加载
谈谈IntersectionObserver懒加载的具体使用
10-16
总之，IntersectionObserver懒加载是一种强大的性能优化工具，通过监控元素的可见性来控制资源加载，有效提高了网页性能，提升了用户体验。理解并掌握其原理和用法，对于开发高性能、响应式的现代网页至关重要。
Animatejs当元素可见时触发动画
08-10
它提供了简单易用的API，使得开发者可以方便地在元素可见时触发各种动画效果。在这个场景中，“Animatejs当元素可见时触发动画”指的是利用Animate.js库来实现一种智能的动画机制，即只有当网页元素进入视口（用户...
IntersectionObserver
03-10
这个API的出现使得开发者可以更高效、更省资源地追踪页面上元素的可见性，例如用于懒加载图片、实现无限滚动或者监控广告是否在视口内等场景。 ### 1. IntersectionObserver API 基础 IntersectionObserver API ...
VisibilityObserver:用于观察元素可见框的实验性API
04-15
可见性观察者 用于观察元素可见框的实验性API 注意：当观察许多元素或DOM中深度嵌套的元素时，此实现当前存在一些严重的性能问题。 它基于requestAnimationFrame() ， getComputedStyle()和getBoundingClientRect() ...
懒加载神器——Intersection Observer
qq_44327851的博客
09-13 415
懒加载是一种独特而又强大的数据获取方式，它能够在用户滚动页面的时候自动获取更多的数据，而得到的新的数据不会影响原有的数据的显示，同时最大程减少服务器端的资源耗用。简单来说，懒加载就是延迟加载，按需加载，当对象要用到的时候再去加载相关的对象，在长网页中延迟加载数据，是一种比较好的网页性能优化方式。该构造函数接收两个参数。其实从上面两点就能很好的看出来，懒加载最常运用到的地方就是图片等资源的的加载了，特别是当图片的资源过大的时候。当我在看到懒加载的需求的时候就在想是否有更好的方法，在DOM API找到了。
js IntersectionObserver监听元素的显示与隐藏，图片懒加载
PrimaryColor
02-23 1359
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ ..
手写图片懒加载-------IntersectionObserver------JavaScript和React
留着鼻涕敲代码
12-10 468
实现思路： 利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。 1. IntersectionObserver的基本使用 详细请看阮一峰IntersectionObserver API 使用教程 作用：监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。 格式： var dom = dom元素 // 实例化一个观察者 // 它的参数1是一个回调：当被观察的目标进入视口/离开视
vitest 单元测试缺少浏览器原生方法IntersectionObserver
weixin_67585820的博客
06-29 563
​ 最近写单元测试的时候遇到一个问题，连续写几个 时会报以下错误，单独一个没事，按说中有不会这样吧，我不理解 ​​​​​​ 既然去不掉就加一个，方法如下 这时候 就不会报错了 最后希望能有人解答我的疑惑，为什么会出现这种情况，是测试用写的的时候出现的这个问题 单独写一个没事： 两次就报错 怎么能避免两次的时候触发呢？...
IntersectionObserver-监听元素是否进入了设备的可视区域之内
吃瓜群众的博客
04-27 1269
demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听元素是否进入了设备的可视区域之内</title> <style> ul,li{ list-styl...
前端检测dom是否被遮盖
renyudouhui的博客
03-17 1590
new IntersectionObserver(([change]) => { console.log(change); // 被覆盖就是false，反之true console.log(change.isVisible) }, { threshold: [1.0], delay: 1000, trackVisibility: true, }).observe(document.querySelector(".first"));
监听元素在视图内的可见性
suxuelengyin的博客
09-10 743
原文链接：https://www.suxuewb.cn/?p=182 有个需求，让视频消失在视图中时停止播放，遂研究起了元素在视图内的可见性。 技术准备 全新的api window.IntersectionObserverEntry可以用于观察元素在视图屏幕区域的可见性，详见MDN。 每当元素与屏幕产生区域交叉时，该函数被触发，并返回交叉区域参数。 滚动监听技术 如果不支持上述的api，就要考虑滚动事件监听实现，每次滚动时就计算元素边缘与视图屏幕的相对关系，以此来判断元素在屏幕上的可视范围。 技术实现 .
JavaScript API： IntersectionObserver
weixin_41897680的博客
12-12 691
JavaScript API： IntersectionObserver
判断元素出现在可视区域的方法
奔跑的小猪仔
08-01 753
它会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者viewport)，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。当以下情况发生时该回调方法会被调用。请留意，你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。缺点事件监听和调用都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。.......
IntersectionObserver 必须是父子元素吗
最新发布
04-19
当目标元素进入或离开根元素时，IntersectionObserver 会调用指定的回调函数，并提供有关交叉状态的信息，例如目标元素的位置、大小、可见性等。 所以，IntersectionObserver 并不限制被监测元素的层级关系，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值