使用 Intersection Observer 实现高效懒加载和滚动监听

在前端开发中,性能优化是提升用户体验的核心之一。随着网页内容的日益增多,如何高效地加载图片、视频等资源,以及如何监听用户的滚动行为,成为了前端开发者需要解决的难题。传统的滚动事件监听往往会带来性能瓶颈,尤其是在需要频繁触发的情况下。为此,Intersection Observer API应运而生,它能让开发者更高效、灵活地处理懒加载和滚动监听等需求。

本文将深入介绍如何使用 Intersection Observer API,帮助你更好地实现懒加载和滚动监听,并优化性能。

一、什么是 Intersection Observer

Intersection Observer 是一个浏览器 API,它提供了一种高效的方式来异步检测目标元素与其祖先元素或顶级视口(viewport)之间的交集。简言之,Intersection Observer 允许你在元素进入或离开视口时执行回调函数,极大提高了性能。

工作原理

Intersection Observer 不需要监听每次滚动事件或定时检查元素的位置。当目标元素与视口发生交集时,Intersection Observer 会触发一个回调函数。这意味着它能够避免滚动事件触发的频繁计算,从而显著降低性能开销。

二、Intersection Observer 的常见应用场景

  1. 懒加载图片/视频
  2. 无限滚动
  3. 元素可见性监控
  4. 广告投放展示

1. 懒加载图片/视频

懒加载是一种只有在用户滚动到某个资源时才加载该资源的技术,通常用于图像和视频。Intersection Observer 可以通过检测图片或视频是否出现在视口内,来决定何时加载资源。

示例代码:
// 选择所有需要懒加载的图片
const images = document.querySelectorAll('img[data-src]');// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;// 替换 data-src 为 src,开始加载图片img.src = img.dataset.src;// 停止观察该图片observer.unobserve(img);}});
}, {rootMargin: '0px',threshold: 0.1
});// 开始观察每一张图片
images.forEach(img => {observer.observe(img);
});
解析:
  • rootMargin: 设置视口的额外空间,可以增加或减少元素触发时的可见范围。
  • threshold: 定义何时触发回调函数,这里设为 0.1 表示元素至少有 10% 可见时才会触发回调。

2. 无限滚动

Intersection Observer 也能帮助你实现高效的无限滚动。当用户滚动到页面底部时,你可以通过 Intersection Observer 自动加载更多的内容。

示例代码:
const sentinel = document.querySelector('#sentinel'); // 页面底部的占位元素const infiniteScrollObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {loadMoreContent(); // 加载更多内容observer.unobserve(sentinel); // 停止观察 sentinel,避免多次触发}});
}, {rootMargin: '200px', // 提前 200px 触发加载更多threshold: 0
});infiniteScrollObserver.observe(sentinel);function loadMoreContent() {// 模拟内容加载setTimeout(() => {const newContent = document.createElement('div');newContent.classList.add('content');newContent.innerHTML = '新的内容加载完成';document.body.appendChild(newContent);// 重新开始观察 sentinelinfiniteScrollObserver.observe(sentinel);}, 1000);
}
解析:
  • rootMargin 设置为 200px,意味着在页面底部前 200px 的地方,Intersection Observer 会提前触发,开始加载新内容。
  • threshold: 0 表示只要目标元素的任何部分进入视口就会触发回调。

3. 元素可见性监控

有时候我们需要根据元素是否出现在视口内来执行一些特定的操作,比如记录用户是否看过某个广告,或者监控某个重要的内容区域是否被用户查看过。Intersection Observer 可以轻松实现这一需求。

示例代码:
const observedElement = document.querySelector('.tracked-element');const visibilityObserver = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {console.log('元素已进入视口');// 执行一些操作} else {console.log('元素已离开视口');}});
}, {threshold: [0, 1], // 监控元素是否完全进入或完全离开视口
});visibilityObserver.observe(observedElement);

三、Intersection Observer 的性能优势

传统的滚动事件监听通常会每次滚动触发,并进行多次计算,导致性能瓶颈。与此相比,Intersection Observer 通过事件的异步执行和优化的算法,能更高效地检测元素的可见性,不会频繁地阻塞主线程。特别是在复杂页面中,Intersection Observer 提供了更高的响应速度和较低的计算成本。

四、Intersection Observer 的兼容性与回退

目前,Intersection Observer 已在现代浏览器中广泛支持,包括 Chrome、Firefox、Edge 和 Safari。然而,较老的浏览器可能不支持该 API。为了应对这种情况,你可以使用 Polyfill 来填补兼容性问题。

安装 Polyfill:
npm install intersection-observer
引入 Polyfill:
import 'intersection-observer';

五、总结

Intersection Observer 提供了一种高效、灵活的方式来处理懒加载、无限滚动和元素可见性监控等场景。它相较于传统的滚动事件监听,能够显著减少性能开销,提高页面响应速度。因此,掌握并合理使用 Intersection Observer API,对于提升前端性能、改善用户体验具有重要意义。

通过本文的介绍,相信你已经对 Intersection Observer 有了更深入的了解。在实际项目中,你可以根据需求灵活应用这一技术,为用户提供更流畅的交互体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/68140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【技术洞察】2024科技绘卷:浪潮、突破、未来

涌动与突破 2024年,科技的浪潮汹涌澎湃,人工智能、量子计算、脑机接口等前沿技术如同璀璨星辰,方便了大家的日常生活,也照亮了人类未来的道路。这一年,科技的突破与创新不断刷新着人们对未来的想象。那么回顾2024年的科…

无线通信与人工智能技术与发展年度总结

2024年,无线通信与人工智能技术取得了显著的进步和突破,这些技术的革新不仅推动了行业的数字化转型,还为全球经济的持续发展注入了新的活力。以下是对无线通信与人工智能技术在这一年发展的详细总结。 #### 无线通信技术的飞速演进 无线通信…

Python 之 Excel 表格常用操作

示例文件 test.xlsx 将各个表单拆分成单独的 Excel 文件 import os.pathimport openpyxl import pandasdef handle_excel(file_path):dirname os.path.dirname(file_path)basename os.path.basename(file_path).split(".")[0]wb openpyxl.load_workbook(file_pat…

激活版,快速安装

每天开机都要等待很长时间,玩游戏或看视频时频繁卡顿,甚至偶尔还会莫名其妙地崩溃。这种情况几乎每个人都遇到过,真是让人头疼不已。 别担心,其实有一种方法可以让你的电脑恢复如新,让我们一起看看如何解决这些烦恼吧…

Kimi 1.5解读:国产AI大模型的创新突破与多模态推理能力(内含论文地址)

文章目录 一、Kimi 1.5的核心技术创新(一)长上下文扩展(Long Context Scaling)(二)改进的策略优化(Improved Policy Optimization)(三)简化框架(S…

[央企大赛 2025] pwn

拿到堆附件,不清楚哪个是密码哪个是pwn,找到两个pwn,一个RSA密码相对简单(已知e,d,N,直接用N解出k((ed-1)//phi_N(ed-1)//N^2),然后求pq,而phi_N正好是pq的2次方程)。就只复现了两个pwn,感觉还有…

.NET 9.0 的 Blazor Web App 项目、Bootstrap Blazor 组件库、自定义日志 TLog 使用备忘

一、设计目标:通用、容易修改、使用简单,所有代码保存在一个文件中,方便移植到其他项目使用。 注:示例使用 Bootstrap Blazor 组件库和 EF Core 、Sqlite,需要先使用 Nuget包管理器 添加对应的包。 namespace Blazor…

单片机基础模块学习——数码管(二)

一、数码管模块代码 这部分包括将数码管想要显示的字符转换成对应段码的函数,另外还包括数码管显示函数 值得注意的是对于小数点和不显示部分的处理方式 由于小数点没有单独占一位,所以这里用到了两个变量i,j用于跳过小数点导致的占据其他字符显示在数…

uniapp——App 监听下载文件状态,打开文件(三)

5 实现下载文件并打开 这里演示,导出Excel 表格 文章目录 5 实现下载文件并打开DEMO监听下载进度效果图为什么 totalSize 一直为0? 相关Api: downloader DEMO 提示: 请求方式支持:GET、POST;POST 方式需要…

MyBatis进阶

1. 动态SQL 1.1 <if>标签的使用(xml版本) 动态 SQL 是Mybatis的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 现在有一个需求.注册分为两种字段&#xff1a;必填字段和⾮必填字段&#xff0c;那如果在添加用户的时候有不确定的字段传⼊&#xff0c;程…

粒子群算法 笔记 数学建模

引入: 如何找到全局最大值&#xff1a;如果只是贪心的话&#xff0c;容易被局部最大解锁定 方法有&#xff1a;盲目搜索&#xff0c;启发式搜索 盲目搜索&#xff1a;枚举法和蒙特卡洛模拟&#xff0c;但是样例太多花费巨量时间 所以启发式算法就来了&#xff0c;通过经验和规…

OpenCV相机标定与3D重建(65)对图像点进行去畸变处理函数undistortPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 从观测到的点坐标计算理想点坐标。 该函数类似于 undistort 和 initUndistortRectifyMap&#xff0c;但它操作的是稀疏点集而不是光栅图像。此外…

AIGC浪潮下,图文内容社区数据指标体系构建探索

在AIGC&#xff08;人工智能生成内容&#xff09;浪潮席卷之下&#xff0c;图文内容社区迎来了新的发展机遇与挑战。为了有效监控和优化业务发展&#xff0c;构建一个科学、全面的数据指标体系显得尤为重要。本文将深入探讨如何在AIGC背景下&#xff0c;为图文内容社区构建一套…

【Unity3D】《跳舞的线》游戏的方块单方向拉伸实现案例

通过网盘分享的文件&#xff1a;CubeMoveMusic.unitypackage 链接: https://pan.baidu.com/s/1Rq-HH4H9qzVNtpQ84WXyUA?pwda7xn 提取码: a7xn 运行游戏点击空格动态创建拉伸的方块&#xff0c;由Speed控制速度&#xff0c;新方向是随机上下左右生成。 using System.Collect…

Android Studio打包APK

1.导出APK安装包 如果是首次打包&#xff0c;Create new 单击蓝色对话框右边文件夹&#x1f4c2;图标 &#xff0c;选择密钥保存路径&#xff0c;然后在下方File name对话框中填写您想要名称&#xff0c;再点击OK回到密钥创建对话框。 在此对话框中填写密码&#xff08;Passwo…

Docker 从零开始掌握容器化技术

Docker 初学者指南&#xff1a;从零开始掌握容器化技术 引言 Docker 是一个强大的工具&#xff0c;可以帮助开发者轻松地创建、部署和运行应用程序。对于初学者来说&#xff0c;Docker 可能看起来有些复杂&#xff0c;但一旦掌握了基本概念和操作&#xff0c;你会发现它非常直…

GSI快速收录服务:让你的网站内容“上架”谷歌

辛苦制作的内容无法被谷歌抓取和展示&#xff0c;导致访客无法找到你的网站&#xff0c;这是会让人丧失信心的事情。GSI快速收录服务就是为了解决这种问题而存在的。无论是新上线的页面&#xff0c;还是长期未被收录的内容&#xff0c;通过我们的技术支持&#xff0c;都能迅速被…

[ACTF2020 新生赛]Include1

题目 点击tips后&#xff1a; 使用PHP伪协议直接读取flag /?filephp://filter/readconvert.base64-encode/resourceflag.php base64解码 拿下flag flag{6cce5a3d-997a-4c8a-ba07-f6652ee462a9}

Linux-rt下卡死之hrtimer分析

Linux-rt下卡死之hrtimer分析 日志 超时读过程分析 #define readl_poll_timeout(addr, val, cond, delay_us, timeout_us) \readx_poll_timeout(readl, addr, val, cond, delay_us, timeout_us)34 #define readx_poll_timeout(op, addr, val, cond, sleep_us, timeout_us) \…

Linux的基本指令(上)

1.ls指令 语法&#xff1a;ls [选项] [目录或文件] 功能&#xff1a;对于⽬录&#xff0c;该命令列出该⽬录下的所有⼦⽬录与⽂件。对于⽂件&#xff0c;将列出⽂件名以及其他信息。 常用选项&#xff1a; -a 列出⽬录下的所有⽂件&#xff0c;包括以 . 开头的隐含⽂件。 -d 将…