JavaScript中的IntersectionObserver使用

最新推荐文章于 2025-04-21 09:13:26 发布

碧海蓝天·

最新推荐文章于 2025-04-21 09:13:26 发布

阅读量212

点赞数

文章标签： javascript 前端开发语言 JavaScript

本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133184554

版权

JavaScript 专栏收录该内容

306 篇文章 ¥59.90 ¥99.00

订阅专栏

IntersectionObserver是JavaScript API，用于检测元素与视口或祖先元素的交叉状态。本文详细介绍了如何创建Observer对象，配置观察选项，观察目标元素，停止观察以及断开Observer，并给出了相关代码示例，帮助理解其在懒加载、无限滚动等场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IntersectionObserver是一个JavaScript API，用于异步观察目标元素与其祖先元素或视口的交叉状态。它可以帮助我们判断一个元素是否进入或离开视口，以及元素与其他元素的交叉情况。在本文中，我将向您详细介绍如何使用IntersectionObserver，并提供相应的源代码示例。

创建IntersectionObserver对象

要使用IntersectionObserver，首先需要创建一个IntersectionObserver对象。构造函数接受一个回调函数和一个可选的配置对象作为参数。回调函数在观察的元素进入或离开视口时被调用。

下面是创建IntersectionObserver对象的示例代码：

const options = {
   
  root: null,

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碧海蓝天·

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JS | 图片懒加载之交叉观察器IntersectionObserver API 手把手教学

青春木鱼的博客

10-18

1741

IntersectionObserver是一种浏览器提供的API，用于监测元素与其祖先元素或视窗的交叉状态。‌ 它通过异步观察目标元素是否可见，来判断目标元素与视窗或其祖先元素的交叉比例，因此也被称为“交叉观察器”。IntersectionObserver的核心功能是判断元素是否进入、离开或部分可见于视窗，这通常用于实现如懒加载、无限滚动等功能‌

JavaScript API： IntersectionObserver

weixin_41897680的博客

12-12

1256

JavaScript API： IntersectionObserver

参与评论您还未登录，请先登录后发表或查看评论

js使用IntersectionObserver实现目标元素可见度的交互

最新发布

鹏多多的博客

04-21

757

IntersectionObserver 是浏览器原生提供的一个Api。可以"观察"我们的元素是否可见，原理是判断目标元素与可见区域的交叉比例，所以也被称为"交叉观察器"。本文通过一个Demo代码，讲解如何使用IntersectionObserver，来实现根据目标元素可见度的交互效果。并附有兼容性，使用场景，完整代码实现，以及成熟的Hooks推荐。

JS：IntersectionObserver（监听目标元素是否出现在窗口中）

qq_45820271的博客

04-08

929

在前端中监听一个元素与可视窗口是否存在交叉/重叠（一个元素是否在可视窗口中）

JS IntersectionObserver使用案例

菜鸟记录

03-10

1028

⏹ new IntersectionObserver( )使用

JS总结——IntersectionObserverAPI

qq_53008257的博客

05-03

1869

什么是IntersectionObserver 文档中的描述为:Intersection Observer API的IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。祖先元素或视口称为根。 ntersectionObserver能做什么可以监视页面中的一个元素是否出现在视口中，以此可以衍生出许多功能，当这个元素出现在视口中时，可以处理发送请求，触发动画等等业务。如何使用我们来分析一下官方给的案例在使用之前，我们需要对Int

谈谈IntersectionObserver懒加载的具体使用

10-16

同时，这种策略也有利于提高网页的SEO评分，因为搜索引擎爬虫通常不会执行JavaScript，使用懒加载可以让爬虫看到更重要的内容。在实际应用中，IntersectionObserver常用于图片懒加载、无限滚动分页等场景。结合...

scrollzzz:使用IntersectionObserver在浏览器中轻松进行滚动驱动的交互

05-26

轻巧，快速，零依赖的程序包，该程序包使用观察元素何时与视口内的（触发）边界线相交。为什么轻松在浏览器中创建滚动驱动的交互，而不会导致性能过载。主要特征您可以访问：滚动方向元素相对于触发器的位置...

react-lazy:使用IntersectionObserver进行React的通用惰性加载器组件

05-02

使用出色的使用现代的IntersectionObserver API。还可以选择通过添加条件注释来跳过noscript元素来支持在IE8和更早版本上显示内容。 npm install react - lazy import { Lazy } from 'react-lazy' // or import {...

JavaScript-lazyload图片懒加载处理-IntersectionObserver

03-12

实际操作代码，可自行下载测试

深入理解 JavaScript 的 IntersectionObserver API

xiaohua0708day的博客

12-02

1507

为了实现页面的高效滚动加载、懒加载图片、观察元素是否进入视口等功能，JavaScript 提供了一个强大的工具 ——在这篇博客中，我们将深入解析 IntersectionObserver 的核心功能、使用方法，以及最佳实践。是一个功能强大且易于使用的 API，特别适合现代 Web 开发中与滚动、懒加载相关的任务。是一个原生的 JavaScript API，用于异步地观察目标元素与其祖先元素（或视口）交叉的情况。和优化回调函数，可以实现高效、流畅的用户体验。是浏览器优化的原生解决方案，性能更高。

vue-li:一个Vue.js组件，可以使用Intersection Observer延迟加载图像

03-19

v懒惰图像一个Vue.js组件，可以在使用进入视口时自动延迟加载图像。你知道吗？在这里，您可以以简洁的格式学习有关Vue.js生态系统的提示，非常适合忙碌的开发人员！ :unicorn: 演示版，，用法 npm install v-lazy-image 警告：如果您要针对不支持该浏览器的浏览器，则需要安装。您可以全局注册该组件，以便在所有应用程序中都可以使用该组件： import Vue from "vue" ; import { VLazyImagePlugin } from "v-lazy-image" ; Vue . use ( VLazyImagePlugin ) ; 或在您的任何组件中本地使用它： import VLazyImage from "v-lazy-image" ; export default { components : { VLazyImage

IntersectionObserver API 详解篇

11-28

温馨提示：本文目前仅适用于在 Chrome 51 及以上中浏览。 2016.11.1 追加，Firefox 52 也已经实现。 2016.11.29 追加，Firefox 的人担心目前规范不够稳定，未来很难保证向后兼容，所以禁用了这个 API，需要手动打开 dom.IntersectionObserver.enabled 才行。 IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域（视口）或者滚动进了它的某个祖先元素的可视区域内。它的主要功能是用来实现延迟加载和展现量统计。先来看一段视频简介：再来看看名字，名字里第一个单词 intersect

react-lazyloading:React Lazy Loading - 使用 Intersection Observer API 延迟加载组件或任何内容

08-03

React惰性负载 React Lazy Loading - 很容易与 React 集成到 Lazyload 组件、图像等。它会监视元素并告诉您元素何时进入视口。这样可以在视口中的组件和初始加载减少时执行任何操作。实现“无限滚动”网站，在您滚动时加载和呈现越来越多的内容，这样用户就不必翻阅页面。内部使用的 :collision: :collision: :collision: 多选下拉菜单的React库。 :collision: :collision: :collision: 特征 :headphone: 钩子或组件- 使用useVisibilityHook可以更轻松地监视元素和执行任何操作。 :fire: 性能- 没有用于滚动、调整大小等的多个侦听器。 :flashlight: 捆绑包- 重量轻，~3.5kb :wrapped_gift: 功能- forceVisible ， forceCheck手动执行操作。 :collision: 内存优化- 一旦组件到达视口/卸载，观察者将断开连接安装 React Lazy Load 需要 React v16.

IntersectionObserver

03-10

IntersectionObserver

JS小知识，Intersection Observer API 使用指南

前端达人

02-16

3859

使用Intersection Observer API在JavaScript中实现懒加载，无限滚动等功能，而不需要使用复杂的逻辑或导致性能问题。Intersection Observer API 用于异步观察元素与浏览器视口的交集变化。它使得检测元素的可见性，或者两个元素的相对可见性变得容易，而不会使网站变得缓慢并降低用户体验。本文将介绍关于Intersection Observer的所有内容。I...

JS63 IntersectionObserver API

多啦的博客

10-31

742

元素可见性页面的可见性可以用document.visibilityState或者document.hidden获得，通过document.visibilitychange来监听页面可见性的变化，但是对于页面的元素的可见性却只能手动通过位置判断。例如下面这个例子需要监听scroll事件，根据target元素的是否出现，来更改顶部的文字和样式。由于target内嵌了几层，所以判断时需要通过ge...

js实现无限滚动加载数据

lbking666666的专栏

07-16

1718

entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。

IntersectionObserver：前端性能优化的新利器

LuckyWinty的博客

01-31

298

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群IntersectionObserver：前端性能优化的新利器在当今网页设计中，用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API，那些性能上的优化。IntersectionObserver 是什么？IntersectionObserver 是一种 JavaScr...

React中使用IntersectionObserver实现无限滚动列表

标题“react-infinite-scroll-list:使用IntersectionObserver API管理无限列表”涉及的关键词包括： - `React`: 一个用于构建用户界面的JavaScript库，由Facebook开发和维护。React采用声明式UI和组件化架构，使得...