IntersectionObserve API 使用注意事项

最新推荐文章于 2024-11-08 17:23:54 发布
原创 最新推荐文章于 2024-11-08 17:23:54 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #safari #css

本文介绍了IntersectionObserver API的基础知识和使用方法，包括如何检测元素可见性及定位问题。特别提醒，该API在IE和Safari浏览器中不被支持。为确保兼容性，建议使用polyfill解决方案，例如通过npm安装。博客内容涵盖了API的兼容性检查、应用技巧和潜在问题的解决策略。

注意： Ie和safari不支持！！！   

基础：

MDN：Intersection Observer - Web API 接口参考 | MDN

阮一峰：IntersectionObserver API 使用教程 - 阮一峰的网络日志

使用注意事项：1. 注意元素定位影响问题（检查元素定位问题）：

当元素部分处于固定定位状态时，其相对于滚动的父元素部分不可见，元素定位问题，可能会导致发生改变后的回调函数的IntersectionObserverEntry对象的 intersectionRatio为0，影响可见性判断分析！！！！！（真的很重要！）

2.兼容性问题：Ie和safari不支持

先通过控制台打印IntersectionObserver 检查，如果为undefined，说明浏览器不支持，以及注意客户端内核是否支持改API的使用，解决方法：利用polyfill，通过npm还是很方便的~

链接：https://github.com/w3c/IntersectionObserver/tree/main/polyfill

使用Intersection Observer API 检测元素是否出现在可视窗口
weixin_50367873的博客
10-26 1204
Intersection Observer API提供了一种检测目标元素与祖先元素或视口(可统称为根元素)相交情况变化的方法。注意点：因为该 API 是的，它不会随着目标元素的滚动同步触发，而IntersectionObserver API是通过requestIdleCallback()实现，即只有浏览器空闲下来，才会执行观察器。
深入浅出详解Intersection Observer交叉观察器 API
流绪@微梦
09-29 1685
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：在页面滚动时“懒加载”图像或其他内容。实现“无限滚动”网站，在滚动过程中加载和显示越来越多的内容，这样用户就不必翻页了。报告广告的可见度，以便计算广告收入。根据用户是否能看到结果来决定是否执行任务或动画进程。视频的播放和暂停。
详解 Intersection Observer API ( 交叉观察器 )
一只路过的小码农
12-02 4126
提供了一种方法可以监听目标元素是否展示到视口（viewport）图片懒加载滚动动画…上述的需求，以往一般监听scroll事件，利用方法获取目标元素的位置信息。由于监听scroll事件，不断地触发回流，对性能有一定的影响，不过可以通过函数节流解决，但是方法对性能造成的影响无法有效优化的。！！！所以，浏览器为了解决上述难题，推出了，由于方法是异步的，不影响主线程的执行效率。
Intersection Observer 实现图片懒加载
柑橘乌云_
12-26 578
假如HTML格式如上图所示，src值是默认图片，真正图片格式放在data-src里。下面的js，非常简单。
浏览器的5种观察器
huangpb的博客
06-21 704
该观察器自动"观察"目标元素与根元素交叉区域的变化。默认根元素为文档视口，此时交叉区域的变化决定了用户在当前视口能否看到目标元素，因此它经常被用于“元素可见性”观察。比如：图片懒加载、无限滚动、广告曝光量统计等。兼容性：IE不支持1. 创建观察器实例 2. 定义观察到目标元素与根元素交叉区域变化时的回调函数 callback(entries, observer)。entries数组中,每个成员都是一个IntersectionObserverEntry对象,如果同时有两个被观察的对象的可见性发生变化，en
IntersectionObserver root 不兼容导致lazyload失效
weixin_30730053的博客
04-02 1100
新版本的LazyLoad使用IntersectionObserver API实现，但是实际用的时候，safari使用LazyLoad失效了。 1 LazyLoad.prototype = { 2 init: function() { 3 4 /* Without observers load everything...
JS63 IntersectionObserver API
多啦的博客
10-31 775
元素可见性 页面的可见性可以用document.visibilityState或者document.hidden获得，通过document.visibilitychange来监听页面可见性的变化，但是对于页面的元素的可见性却只能手动通过位置判断。 例如下面这个例子 需要监听scroll事件，根据target元素的是否出现，来更改顶部的文字和样式。由于target内嵌了几层，所以判断时需要通过ge...
uniapp使用intersectionObserve
最新发布
10-31
在 UniApp 中，`IntersectionObserver` 用于监听目标元素与祖先元素或视口的交叉状态，它是基于浏览器的 `Intersection Observer API` 实现的，能有效提升性能，避免频繁的 DOM 操作。 ### 使用方法 1. **创建 ...
IntersectionObserver实现图片懒加载（超详细！）
Deku_Ln的博客
12-07 3721
关于IntersectionObserver 官方上说明是提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根（root）。 具体的内容可以参考官网解释：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver 这里我们主要来用IntersectionObserve来实现图片的懒加载。 <!DOCTYPE html> <.
Vue3中使用原生的js监听图片懒加载
weixin_48837605的博客
09-16 636
目的:当图片进入可视区域的时候去加载图片,且数据要是加载失败,会显示默认的图片 需解决的问题: 1.如果监听图片进入可视区域 2.直接操作图片,给他的src属性赋值 3.自定义指令的规则 自定义指令实现如下的 src\components\library\index.js 注意:使用webapi:IntersectionObserve ,vueuse中的useIntersectionObserve的底层就是由这个webAPI而来的 其中有两个方法 observe.observe(imgDom
it-intersect:一个超级简单的Vue.js组件，使用IntersectionObserver通知与视口或元素相交的时间
05-12
它相交 一个简单的组件，使用IntersectionObserver通知与视口或元素相交的时间 关于 作为IntersectionObserver API的包装，当您的应用程序需要响应视口中特定组件的存在时，此简单组件非常有用。 最佳用例可能是无限滚动。 鉴于您要在容器组件中呈现列表，因此，如果将此组件放置在该容器中的列表之后，则可以侦听交集事件并执行异步操作以更新列表 重要的 该组件基于Intersection Observer API （目前是一项实验性技术），仅在最新版本的主要浏览器中实现。 幸运的是，您可以包括一个官方的 ，以使一切正常 安装 npm install it-intersect # or yarn add it-intersect 用法 这是无限滚动加载的示例 < template> < div> <!-- your list -->
ant-virtual-table:这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的AntDesign表。考虑到兼容性问题，内部通过监听表的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。的throttle处理毒性问题，目前没有采用raf
03-11
蚂蚁虚拟表 |简体中文 这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的，可以让你实例中处理渲染1000万条数据，页面也非常流畅。 设计说明 考虑到兼容性问题，内部通过侦听表的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。另外组件约会loash的节流处理问题，目前没有采用raf React抗虚拟表 安装 npm install ant-virtual-table --save-dev 用法 例子 import React, { Component, Fragment } from 'react' import { VirtualTable } from 'ant-virtual-table' import 'antd/d
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
xxq_0217的博客
03-27 2693
IntersectionObserver：实现滚动动画、懒加载、虚拟列表
懒加载核心实现之intersectionobserver 交叉观察器踩坑
jiajia199470的博客
11-10 3043
懒加载核心实现之intersectionobserver 交叉观察器踩坑前言浏览器的兼容情况你可能会遇到的兼容性问题再来看看主流库的实现也想尝鲜 IntersectionObserver？问答环节先天条件不足，那只能放弃吗？结论为什么写此文题外话 前言 懒加载是一种对网页性能优化的方式，它的原理是除了首屏资源，部分资源在浏览器滚动时出现在可视区域内的再惰性加载，而不一次性加载所有。这样做对网页性能以及用户体验都有提升。 如果你的懒加载方案是基于 intersectionobserver API ，出现懒加
IntersectionObserver学习笔记，再也不用用scroll去做缓加载和无限滚动啦（如果不用IE的话。。）
zem
06-17 5660
IntersectionObserver可以实现类似于监听目标元素的祖先元素与视窗的交叉状态，简单地说就是能监听到某个元素是否会被我们看到，当我们看到这个元素时，可以执行一些回调函数来处理某些事务。 IntersectionObserver的小试验 <!DOCTYPE html> <html lang="en"> <head> <meta ...
IntersectionObserver
github_39168802的博客
03-29 1484
一 API ​IntersectionObserver API，可以自动"观察"元素是否可见，由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。 用法比较简单： let io = new IntersectionObserver(cb, ops) IntersectionObserver是浏览器原生提供的构造函数, 接受两个参数：cb是可见性变化时提供的回调函数，ops是配置对象。 构造函数返回的是一个观察器实例，此实例有很多方法，比如obs
js实现无限滚动加载数据
lbking666666的专栏
07-16 2052
entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。
交叉观察 API Intersection Observer
frontend_frank的博客
09-09 496
前言前端开发肯定离不开判断一个元素是否能被用户看见，然后再基于此进行一些交互。过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展...
使用Intersection Observer API时，浏览器的兼容性问题怎么解决
m0_74316302的博客
11-08 1203
设计一个优雅降级的用户体验，即在不支持Intersection Observer API的情况下，应用仍然能够提供基本的功能，但可能不如完全实现的效果好。通过这些方法，你可以确保Intersection Observer API在不支持它的浏览器中也能以一种或另一种方式正常工作，从而提供更好的跨浏览器兼容性。： 对于首屏内容，可以考虑使用服务端渲染（SSR）来确保即使在不支持Intersection Observer API的浏览器中也能提供良好的用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值