首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

对于较长的部分,IntersectionObserver不适用于小屏幕

IntersectionObserver是一个用于监测元素是否进入或离开视口的API。它提供了一种高效的方式来观察元素的可见性变化,特别适用于需要实时响应元素可见性的场景。

IntersectionObserver的工作原理是通过创建一个观察器对象,然后将其与需要观察的元素进行关联。当被观察的元素进入或离开视口时,观察器对象会触发相应的回调函数,从而可以执行相应的操作。

然而,尽管IntersectionObserver在大多数情况下都是一个非常有用的工具,但它并不适用于小屏幕设备。这是因为小屏幕设备通常具有有限的视口空间,而且用户在滚动页面时,元素的可见性会频繁地发生变化。这种频繁的变化可能会导致IntersectionObserver的回调函数被频繁触发,从而对性能产生负面影响。

对于小屏幕设备,更适合使用其他方法来实现元素的可见性检测。例如,可以使用scroll事件来监听页面的滚动,并通过计算元素的位置和视口的位置来判断元素是否可见。另外,也可以使用CSS的@media查询来根据屏幕尺寸来动态调整元素的可见性。

总结起来,IntersectionObserver在大多数情况下是一个强大且高效的工具,但在小屏幕设备上的应用需要谨慎使用,可以考虑使用其他方法来实现元素的可见性检测。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WPF 获取元素(Visual)相对于屏幕设备缩放比例,可用于清晰显示图片

我们知道,在 WPF 中坐标单位不是屏幕像素单位,所以如果需要知道某个控件像素尺寸,以便做一些与屏幕像素尺寸相关操作,就需要经过一些计算(例如得到屏幕 DPI)。...本文将提供一套计算方法,帮助计算某个 WPF 控件相比于屏幕像素尺寸缩放比例,用于进行屏幕像素级别的渲染控制。 ---- 一个 WPF 控件会经历哪些缩放?...于是,我们控件如何得知此时相比于屏幕像素缩放比呢?换句话说,如何得知此时此控件显示占了多少个屏幕像素宽高呢?...1 2 3 // VisualRoot 方法用于查找 visual 当前可视化树根,如果 visual 已经显示,则根会是窗口中根元素。...欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://blog.walterlv.com ),不得用于商业目的,基于本文修改后作品务必以相同许可发布。

64840

程序长列表优化实践

整个程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。...正常情况下,当在移动端滑动设备时候,只有手机屏幕内可视区域是真正需要渲染部分,如下所示: 那就首先就要知道哪些 item 在屏幕区域内,一般情况下,这种长列表都是基于 scroll-view 实现...,这种方式对于程序开发者有一定技术熟练度要求。...当然 recycle-view 是基于微信原生程序实现,所以可以适用于原生程序,以及基于原生程序衍变其他平台程序,比如支付宝程序,美团程序等。...VirtualList 这种方式是基于 Taro 平台开发,所以它使用场景就有一定局限性,开发者只能通过 Taro 中使用,比如一些原生程序,就很不适用了,即便是想要通过改造源码方式来让 VirtualList

2.6K20
  • 在微信程序中实现商品曝光统计

    但是今天要讨论是微信程序中统计方式。...在web中统计曝光的话,可以监听滚动事件,然后根据元素offset().top 和 body元素scrollTop进行计算元素相对于Viewport位置,从而判断当前页面中有哪些商品组件在屏幕内。...微信程序IntersectionObserver接口 官方文档解释是 IntersectionObserver对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。...以上是示例伪代码 何时创建IntersectionObserver对象 如果你使用原生程序进行开发,应该在组件内部ready生命周期内创建IntersectionObserver对象,组件内部创建方法有些不同...失败状态被IntersectionObserver吞掉了 需要换个思路。 微信程序还提供了SelectorQuery对象,类似浏览器中document.querySelector。

    3.3K10

    一文帮你搞定H5、程序、Taro长列表曝光埋点

    )变化进行监听; 优点: 性能更高:浏览器底层实现,并进行了相应优化,性能没有问题:监听不会在主线程进行(只要回调方法会在主线程触发); 计算量:这里计算量是指web开发者需要进行计算操作,因为大部分计算浏览器...3. 1. 1 具体使用方法: 第一步:创建一个观察者(IntersectionObserver) 首先需要创建一个观察者IntersectionObserver用于监听目标元素相对于根视图(可以是父视图或当前窗口...Intersection Observer API类似,使用方式也基本相同,只是部分细节存在差异;具体步骤: 第一步:创建一个观察者(IntersectionObserver) 通过微信程序框架提供...这是由于dataset是程序特殊模版属性,主要作用是可以在事件回调 event 对象中获取到 dataset 相关数据,Taro对于这些能力是部分支持,Taro通过在逻辑层模拟已经支持在事件回调对象中通过...上一点所说,Taro 对于程序 dataset 模拟是在程序逻辑层实现。并没有真正在模板设置这个属性。

    1.1K21

    【腾讯云前端性能优化大赛】秒开艺术:Hexo 博客首屏耗时优化实践

    不同博主对于博客功能需求是各不相同,因此主题各个可选功能也常常是模块化,需要引入诸多 JS、CSS、图片和字体等静态资源。...[6m5io70klb.png] 在 Hexo 博客中要实现这种文件版本控制方法,一方面要在 Hexo 构建时修改静态资源文件名以及对应引用路径,另一方面要为带哈希值静态资源设置一个较长缓存时间...,这里是 10% 部分出现在屏幕中时会触发以上回调 threshold: [0.1], }); observer.observe(document.getElementById('comment...引入了字体,具体引入是中文字体 Noto Serif SC(思源宋体)用于标题字体展示。...这里要先说明一下 Google Fonts 对于中文等大字符集在线字体提供方式。

    934141

    程序之图片懒加载

    显示 : 默认 我们知道程序页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象环境,所以不能在脚本中使用window,也无法在脚本中操作组件。...悄悄告诉你,程序里面有个onPageScroll 函数,是用来监听页面的滚动。 还有个getSystemInfo 函数,可以获取获取系统信息,里面包含屏幕高度。 接下来,思路就透彻了吧。...this.setData({ group }) }).exec() } onPageScroll(){ // 滚动事件 this.showImg() } 至此,我们完成了一个程序版图片懒加载...它是一个新API,叫做IntersectionObserver, 本文只讲解简单使用,了解更多请猛戳没错,就是点我 程序里面给它定义是节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上相交状态...这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

    1.1K40

    图片懒加载几种实现方式

    懒加载关键是如何判断图片处于浏览器可视范围内,通常有三种方法: 方法一 通过对比屏幕可视窗口高度和浏览器滚动距离与元素相对文档顶部距离之间关系,判断元素是否可见。...const scrollTop = document.body.scrollTop // 浏览器窗口顶部与文档顶部之间距离 // el.offsetTop 元素相对于文档顶部距离...是为了提前加载 return el.offsetTop <= clientHeight + scrollTop + 100 } 方法二 通过 getBoundingClientRect() 获取图片相对于浏览器视窗位置...(callback, option) IntersectionObserver 是一个构造函数,接受两个参数,第一个参数是可见性变化时回调函数,第二个参数定制了一些关于可见性参数(可选),IntersectionObserver...Intersection Observer API 会注册一个回调方法,每当期望被监视元素进入或者退出另外一个元素时候(或者浏览器视口)该回调方法将会被执行,或者两个元素交集部分大小发生变化时候回调方法也会被执行

    2.6K20

    冰李笛:调用API商业模式不适用于未来 | MEET 2024

    这便是冰CEO李笛在MEET 2024智能大会中所总结最新观察——《AIGC:变革已至,商业未至》,并且提出一问: 如此困境,如何破局?...演讲要点 技术发展永远是在不停波峰波谷之间徘徊 现在属于人工智能巨大变革之前一个蛮荒时代 明年一季度AIGC技术创新会相对稳定,不会陷入到论文都看不过来程度 调用API大模型商业模式不适用于未来...对于冰来讲,某种意义上至少我们看到两个非常重要事情,我们在国内是比较沉默,但我们大模型相关技术在日本相对比较高调一些。...我们预判到明年一季度时候,这一波技术创新差不多可以到达相对比较稳定状态了,我们也就不再会陷入到论文都看不过来程度。 而客观上来讲,目前为止,大部分产品应用都还没有得到证伪。...但它在今天对于绝大部分所谓既有的垂直领域而言,不论它技术,不论它质量如好,往往意味着巨大原有市场萎缩。

    16910

    聊一聊H5营销页面的性能优化

    我来自机票BU,目前负责机票营销业务开发,众所周知营销业务普遍特点是:访问量很大。每次营销活动,对于不同角色同学,关注点也不一样。 运营/产品同学更为关注产品转化、拉新、留存、用户行为。...唯独第二部分,用户体验这部分数据(对应性能监控)对我们影响很大,也是我们着力在提升。 本文就分享一下我们在用户体验优化和页面性能提升上做一系列改造工作,希望能给看文章你一些启发。...为了防止图片变形,宽度取当前屏幕宽度,高度则用当前屏幕宽度乘以原图片宽高比: <ImageComponent v-show="!...但一番试用下来,发现nfes-serviceworker-webp 工具依赖于延迟加载 sw 文件,无法在图片加载<em>的</em>时机保证 sw 注册完成,<em>对于</em>二次缓存有较强<em>的</em>帮助,<em>不适</em>用与我们改善首次加载<em>的</em>场景。...既然这种方法<em>不适</em>合我们<em>的</em>业务场景,我们就自己做了调研,最终改为项目内部判断 webp <em>的</em>支持性,并直接加载 webp 图片,以原图作为兜底展示。

    89010

    前端性能优化系列 | 加载优化

    如果能提前完后才能上述操作,那么就能带来更好用户体验,与此同时,由于建立连接部分时间是消耗在等待时间上,这样也能有效优化宽度使用情况。...在比较长网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口那一部分图片数据,这样就浪费了性能。 使用图片懒加载就可以解决上述问题。...在滚动屏幕之前,可视化区域之外图片不会进行加载,在滚动屏幕时才加载。懒加载适用于图片较多,页面较长页面场景中。 懒加载与预加载区别: 一个是提前加载,一个是迟缓甚至不加载。...懒加载:指的是在长网页中延迟加载图片时机,当用户需要访问时,再去加载,这样可以提高网站首屏加载速度,提升用户体验,并且可以减少服务器压力。它适用于图片很多,页面很长电商网站场景。...:autoplay自动播放、muted静音播放、loop循环播放、playsinline用于在ios系统中自动播放。

    9810

    IntersectionObserver对象

    Intersection Observer API会注册一个回调函数,每当被监视元素进入或者退出另外一个元素时或viewport,或者两个元素相交部分大小发生变化时,该回调方法会被触发执行,这样网站主线程不需要再为了监听元素相交而辛苦劳作...,当其监听到目标元素可见部分穿过了一个或多个阈thresholds时,会执行指定回调函数。...属性IntersectionObserver.thresholds只读,一个包含阈值列表,按升序排列,列表中每个阈值都是监听对象交叉区域与边界区域比率,当监听对象任何阈值被越过时,都会生成一个通知...rootBounds:根元素矩形区域信息,是getBoundingClientRect方法返回值,如果没有根元素即直接相对于视口滚动,则返回null。...应用 实现一个使用IntersectionObserver简单示例,两个方块分别可以演示方块1是否在屏幕可见区域内以及方块2是否在方块1相对可见交叉区域内,另外可以使用IntersectionObserver

    69220

    一次DOM曝光封装历程

    初版 逻辑:window.scroll 监听滚动 + 使用 getBoundingClientRect() 相对于视口位置实现 具体代码如下: function buryExposure (el, fn...window.IntersectionObserver 这次曝光主角:优先使用异步观察目标元素与祖先元素或顶级文档viewport交集中变化方法 关于他具体介绍,我这里简单讲一下我用到属性,...(部分显示则曝光): intersectionRatio === 1:则监听对象完整显示 intersectionRatio > 0 && intersectionRatio < 1 : 则监听对象部分显示...如果从 root 可视区消失,返回 false 按理说应该是使用它,但是发现不适合现实场景!!! 比如 类 banner 横向移动 (https://jsbin.com/vuzujiw/6/edit?...html,css,js,console,output),我第一调试时候就碰到了 用户要看子元素是被父元素给限制住了,但是对于 isIntersecting 它来讲是出现在视口内

    18820

    现代浏览器观察者 Observer API 指南

    IntersectionObserver 优势 Intersection Observer API通过为开发人员提供一种新方法来异步查询元素相对于其他元素或全局视口位置,从而解决了上述问题: 异步处理消除了昂贵...Mutation Observer:变动观察者 接口提供了监视对DOM树所做更改能力。它被设计为旧MutationEvents功能替代品,该功能是DOM3 Events规范部分。 1....比如下面这个示例: ? 2....@media查询最大问题是: 组件响应度取决于屏幕尺寸,而不是响应自身尺寸。 以下是指令版实现: ? 使用: ? 效果: ?...getEntriesByType() 返回一个列表,该列表包含一些用于承载各种性能数据对象,按类型过滤 getEntriesByName() 返回一个列表,,该列表包含一些用于承载各种性能数据对象

    3.7K40

    【总结】2072- 前端常见性能优化策略

    首屏利用服务端渲染,后续交互采用客户端渲染 什么是Perfomance API 衡量和分析各种性能指标对于确保 web 应用速度非常重要。...性能时间线使用高精度时间戳,且可以在开发者工具中显示。你还可以将相关数据发送到用于分析端点,以根据时间记录性能指标。...FP First Paint(首次绘制) 第一个像素点绘制到屏幕时间 FCP First Contentful Paint(首次内容绘制) 首次绘制任何文本,图像,非空白节点时间 FMP First...静态文件优化 1.图片优化 图片格式: jpg:适合色彩丰富照片、banner图;不适合图形文字、图标(纹理边缘有锯齿),不支持透明度 png:适合纯色、透明、图标,支持半透明;不适合色彩丰富图片,...渲染成本过高,适合且色彩单一图标; 图片优化: 避免空src图片 减小图片尺寸,节约用户流量 img标签设置alt属性, 提升图片加载失败时用户体验 原生loading:lazy 图片懒加载

    11210

    彻底玩转图片懒加载及底层实现原理

    前言 图片懒加载其实已经是一个近乎“烂大街”词语了,在大大小小面试中也会被频繁问到,我在之前面试中也被问到了图片懒加载原因、实现方式及底层原理,但由于自己平时很少做“图片”相关处理,对于“懒加载...基于原生 js 实现图片懒加载 相关 API 先来看几个后面会用到API document.documentElement.clientHeight 获取屏幕可视区域高度。 ?...“图片来源MDN[1] element.offsetTop 获取元素相对于文档顶部高度。 ?...,这里我们可以给事件加上节流throttle 基于 getBoundingClientRect()实现图片懒加载 先来了解一下这个API吧: getBoundingClientRect()用于获得页面中某个元素左...getBoundingClientRect()是DOM元素到浏览器可视范围距离(不包含页面看不见部分)。

    93731

    【前端词典】4 (+1)种滚动吸顶实现方式比较

    offsetTop 用于获得当前元素到定位父级( element.offsetParent )顶部距离(偏移值)。...不包含文档卷起来部分。 ? 该函数返回一个 object 对象,有8个属性: top,right,buttom,left,width,height,x,y ?...2. offsetTop: 用于获得当前元素到定位父级( element.offsetParent )顶部距离(偏移值)。...(保存变量); 在使用时候可能出现 DOM 没有初始化,就读取了该属性,这个时候会返回 0;对于这个问题我们需要等到 DOM 元素初始化完成后再执行。...因此我们优化方向就是从减少读取元素属性次数下手,查看代码发现一触发屏幕滚动事件就会调用相关方法读取元素偏移量。

    2.1K30

    5个让你提高工作效率 VueUse 库函数

    英文 | https://learnvue.co/2021/07/5-vueuse-library-functions-that-can-speed-up-development/ 翻译 | 爱...动画(Animation)—包含易于使用过渡、超时和计时函数 浏览器(Browser)—可用于不同屏幕控制、剪贴板、首选项等 组件(Component)— 为不同组件方法提供简写 Formatters...这些类别中大多数都包含几个不同功能,因此 VueUse 可以灵活地用于用例,并且可以作为快速开始构建 Vue 应用程序绝佳场所。...第一步是在不使用 VueUse 情况下创建我们基本组件——使用 ref、textarea 和用于撤消和重做按钮。...通常,我们希望模态屏蔽网页其余部分以吸引用户注意力并限制错误。但是,如果他们确实在模态之外单击,我们希望它关闭。

    1.8K10

    使用相交观察器和SQIP进行渐进式图像加载

    要看到这个实例例子,让我们来看看下面的图片 上面的图片是中间载入页面的屏幕截图。...左侧屏幕截图显示了首次加载低质量图像时页面,然后右侧屏幕截图显示了页面完成加载后页面,并显示了完整质量图像 这种图像加载技术被称为LQIP(低质量图像占位符),几年前由Guy Podjarny...使用IntersectionObserver默认选项,当元素部分进入视图并完全离开视口时,你回调将被调用。在这种情况下,我正在通过一些额外配置选项到IntersectionObserver。...使用rootMargin允许你为根指定页边距,从而有效地允许你增大或缩小用于交点区域。...,页面上同一张图片用两种存储格式 当触发某个条件,加载到该图片时,先加载低质量体积图片,然后快速被该实际图片尺寸给替换。

    1.8K20
    领券