使用 IntersectionObserver 实现懒加载提升网页性能的高效方案
在当今快节奏的网络环境中,用户对于网页加载速度的要求越来越高。对于前端开发者而言,优化网页性能、减少初始加载时间成为了一项至关重要的任务。懒加载(Lazy Loading)作为一种有效的性能优化策略,能够延迟非关键资源的加载,直到用户需要它们时才进行加载。而IntersectionObserver
API 的出现,为实现懒加载提供了更加简洁、高效的方式。本文将深入探讨如何使用IntersectionObserver
实现 JavaScript 懒加载,以及它在网页性能优化中的重要作用。
一、懒加载的重要性
在网页中,往往包含大量的图片、视频、脚本等资源。如果这些资源在页面加载时全部一次性加载,不仅会增加页面的初始加载时间,还会消耗用户的网络流量,尤其是在移动设备上,这可能导致用户体验的严重下降。懒加载的核心思想就是只在资源即将进入用户视野时才进行加载,从而减少初始加载的资源量,提升页面的加载速度和响应性能。例如,对于一个长页面中的图片,我们可以让它们在即将显示在视口内时再加载,而不是在页面一开始就全部加载。
二、IntersectionObserver API 简介
IntersectionObserver
是浏览器提供的一个原生 JavaScript API,它允许我们异步观察目标元素与祖先元素或视口的交集变化情况。它通过创建一个观察器实例,并指定观察的目标元素和配置选项,当目标元素与指定的根元素(可以是视口或其他祖先元素)发生交集变化时,观察器会自动调用预先设置好的回调函数。这种异步、低开销的方式,使得它非常适合用于实现懒加载等需要监听元素可见性变化的场景。
IntersectionObserver
的基本使用步骤如下:
创建一个IntersectionObserver
实例,传入回调函数和配置选项。
const observer = new IntersectionObserver(callback, options);
使用observe
方法开始观察目标元素。
observer.observe(targetElement);
当目标元素与根元素的交集状态发生变化时,回调函数会被调用,在回调函数中可以根据需要执行相应的操作。
如果不再需要观察某个元素,可以使用unobserve
方法停止观察。
observer.unobserve(targetElement);
当不再使用观察器时,可以调用disconnect
方法关闭观察器,释放资源。
observer.disconnect();
三、使用 IntersectionObserver 实现图片懒加载
图片是网页中最常见的需要懒加载的资源之一。下面通过一个具体的示例来展示如何使用IntersectionObserver
实现图片的懒加载。
1. HTML 结构
首先,创建一个包含图片的 HTML 页面,这里我们使用data-src
属性来存储图片的真实地址,而src
属性则设置为一个占位图片(例如一个小的加载动画图片)。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>IntersectionObserver Lazy Loading</title><style>img {max-width: 100%;height: auto;}</style>
</head><body><img data-src="image1.jpg" alt="Lazy Load Image 1" class="lazy-image" src="placeholder.jpg"><img data-src="image2.jpg" alt="Lazy Load Image 2" class="lazy-image" src="placeholder.jpg"><img data-src="image3.jpg" alt="Lazy Load Image 3" class="lazy-image" src="placeholder.jpg"><script src="script.js"></script>
</body></html>
2. JavaScript 代码
在 JavaScript 文件(script.js
)中,使用IntersectionObserver
来实现图片的懒加载逻辑。
// 获取所有带有懒加载标识的图片元素
const lazyImages = document.querySelectorAll('.lazy-image');// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;// 停止观察已加载的图片observer.unobserve(img); }});
}, {// 配置选项,这里设置根为视口,根的边距为 0root: null, rootMargin: '0px', // 阈值为 0.1 表示目标元素 10% 进入视口时触发回调threshold: 0.1
});// 开始观察每个懒加载图片
lazyImages.forEach(image => {observer.observe(image);
});
在上述代码中,我们首先获取所有需要进行懒加载的图片元素。然后创建一个IntersectionObserver
实例,在回调函数中判断目标元素是否进入视口(通过entry.isIntersecting
属性),如果进入视口,则将图片的真实地址从data-src
属性赋值给src
属性,从而实现图片的加载,并停止对该图片的观察。最后,对每个懒加载图片调用observe
方法开始观察。
四、使用 IntersectionObserver 实现其他资源的懒加载
除了图片,IntersectionObserver
还可以用于实现其他资源的懒加载,例如视频、脚本等。以视频为例,我们可以在视频即将进入视口时才开始加载视频资源,减少页面初始加载的负担。
1. HTML 结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>IntersectionObserver Lazy Loading Video</title>
</head><body><video data-src="video.mp4" controls class="lazy-video"><source src="placeholder.mp4" type="video/mp4"></video><script src="script.js"></script>
</body></html>
2. JavaScript 代码
// 获取所有带有懒加载标识的视频元素
const lazyVideos = document.querySelectorAll('.lazy-video');// 创建 IntersectionObserver 实例
const videoObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const video = entry.target;const source = video.querySelector('source');source.src = video.dataset.src;video.load();// 停止观察已加载的视频observer.unobserve(video); }});
}, {root: null,rootMargin: '0px',threshold: 0.1
});// 开始观察每个懒加载视频
lazyVideos.forEach(video => {videoObserver.observe(video);
});
在这个视频懒加载的示例中,当视频元素进入视口时,我们将视频的真实地址从data-src
属性赋值给<source>
标签的src
属性,并调用video.load()
方法开始加载视频资源,然后停止对该视频的观察。
五、兼容性与注意事项
虽然IntersectionObserver
在现代浏览器中得到了广泛支持,但在一些较旧的浏览器中可能不被支持。为了确保兼容性,可以使用一些 polyfill 库,如intersection-observer
,它可以在不支持该 API 的浏览器中模拟其功能。
此外,在使用IntersectionObserver
时,还需要注意以下几点:
性能优化:合理设置threshold
阈值,避免频繁触发回调函数,影响性能。
内存管理:及时调用disconnect
方法关闭不再使用的观察器,释放资源,防止内存泄漏。
复杂场景处理:在复杂的页面布局和动态内容变化的场景中,需要仔细考虑元素的显示和隐藏逻辑,确保IntersectionObserver
的正确使用。
六、总结
IntersectionObserver
API 为实现 JavaScript 懒加载提供了一种强大而高效的方式。通过它,我们可以轻松地控制资源的加载时机,减少页面的初始加载时间,提升用户体验。无论是图片、视频还是其他资源,都可以利用IntersectionObserver
实现灵活的懒加载策略。在实际项目中,合理运用这一技术,并注意兼容性和性能优化等问题,能够让我们的网页应用更加高效、流畅。随着前端技术的不断发展,IntersectionObserver
也将在更多的性能优化场景中发挥重要作用。
相关文章:
使用 IntersectionObserver 实现懒加载提升网页性能的高效方案
在当今快节奏的网络环境中,用户对于网页加载速度的要求越来越高。对于前端开发者而言,优化网页性能、减少初始加载时间成为了一项至关重要的任务。懒加载(Lazy Loading)作为一种有效的性能优化策略,能够延迟非关键资源…...
Python-Django系列—部件
部件是 Django 对 HTML 输入元素的表示。部件处理 HTML 的渲染,以及从对应于部件的 GET/POST 字典中提取数据。 内置部件生成的 HTML 使用 HTML5 语法,目标是 <!DOCTYPE html>。例如,它使用布尔属性,如 checked…...

linux中shell脚本的编程使用
linux中shell脚本的编程使用 1.shell的初步理解1.1 怎么理解shell1.2 shell命令 2.shell编程2.1 什么是shell编程2.2 C语言编程 和 shell编程的区别 3.编写和运行第一个shell脚本程序3.1 编写时需要注意以下几点:3.1.1 shell脚本没有main函数,没有头文件…...

图像畸变-径向切向畸变实时图像RTSP推流
实验环境 注意:ffmpeg进程stdin写入两张图片的时间间隔不能太长,否则mediamtx会出现对应的推流session超时退出。 实验效果 全部代码 my_util.py #进度条 import os import sys import time import shutil import logging import time from datetime i…...

手搓雷达图(MATLAB)
看下别人做出来什么效果 话不多说,咱们直接开始 %% 可修改 labels {用户等级, 发帖数, 发帖频率, 点度中心度, 中介中心度, 帖子类型计分, 被列为提案数}; cluster_centers [0.8, 4.5, 3.2, 4.0, 3.8, 4.5, 4.2; % 核心用户0.2, 0.5, 0.3, 0.2, 0.1, 0.0, 0.0;…...

汽车零配件供应商如何通过EDI与主机厂生产采购流程结合
当前,全球汽车产业正经历深刻的数字化转型,供应链协同模式迎来全新变革。作为产业链核心环节,汽车零部件供应商与主机厂的高效对接已成为企业发展的战略要务。然而,面对主机厂日益严格的数字化采购要求,许多供应商在ED…...

闻性与空性:从耳根圆通到究竟解脱的禅修路径
一、闻性之不动:超越动静的觉性本质 在《楞严经》中,佛陀以钟声为喻揭示闻性的奥秘:钟声起时,闻性显现;钟声歇时,闻性不灭。此“不动”并非如磐石般凝固,而是指觉性本身超越生灭、来去的绝对性…...

第34课 常用快捷操作——按“空格键”旋转图元
概述 旋转某个图元,是设计过程中常需要用到的操作,无论是在原理图中旋转某个图形,还是在PCB图中旋转某个元素。 旋转操作的快捷键是空格键。下面作详细介绍。 按空格键旋转图元 当我们选中一个图元时,按下空格键,即…...

基于亚马逊云科技构建音频转文本无服务器应用程序
Amazon Transcribe是一项基于机器学习模型自动将语音转换为文本的服务。它提供了多种可以提高文本转录准确性的功能,例如语言自定义、内容过滤、多通道音频分析和说话人语音分割。Amazon Transcribe 可用作独立的转录服务,也可以集成到应用程序中提供语音…...
如何打包python程序为可执行文件
将 Python 程序打包为可执行文件是一个常见需求,尤其是在希望将应用程序分享给不具备 Python 环境的用户时。以下是使用 PyInstaller 工具将 Python 程序打包为可执行文件的步骤。 步骤 1:安装 PyInstaller 如果您还没有安装 PyInstaller,请…...

计算机二级MS Office第八套演示文稿
教程:...

K8S Service 原理、案例
一、理论介绍 1.1、3W 法则 1、是什么? Service 是一种为一组功能相同的 pod 提供单一不变的接入点的资源。当 Service 存在时,它的IP地址和端口不会改变。客户端通过IP地址和端口号与 Service 建立连接,这些连接会被路由到提供该 Service 的…...

实验四 进程调度实验
一、实验目的 1、了解操作系统CPU管理的主要内容。 2、加深理解操作系统管理控制进程的数据结构--PCB。 3、掌握几种常见的CPU调度算法(FCFS、SJF、HRRF、RR)的基本思想和实现过程。 4、用C语言模拟实现CPU调度算法。 5、掌握CPU调度算法性能评价指…...

ABAP Object Services
ABAP Object Services...

linux blueZ 第四篇:BLE GATT 编程与自动化——Python 与 C/C++ 实战
本篇聚焦 BLE(Bluetooth Low Energy)GATT 协议层的编程与自动化实践,涵盖 GATT 基础、DBus API 原理、Python(dbus-next/bleak)示例、C/C++ (BlueZ GATT API)示例,以及自动发现、读写特征、订阅通知、安全配对与脚本化测试。 目录 BLE GATT 基础概念 BlueZ DBus GATT 模…...

Linux线程与进程:探秘共享地址空间的并发实现与内
Linux系列 文章目录 Linux系列前言一、线程的概念二、线程与地址空间2.1 线程资源的分配2.2 虚拟地址到物理地址的转换 三 、线程VS进程总结 前言 在Linux操作系统中,线程作为CPU调度的基本单位,起着至关重要的作用。深入理解线程控制机制,是…...
ValueError: matmul: Input operand 1 has a mismatch in its core dimension 0
在遇到这个代码时,大多数情况下就是两个运算的向量维度不匹配,此时,可以打印一下两个数组的维度, # print(“[DEBUG] a shape:”, a.shape) # print(“[DEBUG]b:”, b.shape) 假设a.shape结果为[,200],b.shape结果为[210,255],那么…...
MySQL 8.4企业版 安装和配置审计插件
在最新的MySQL 8.4.4企业版上启用审计日志功能 操作系统:Ubuntu 24.04 数据库:8.4.4-commercial for Linux on x86_64 (MySQL Enterprise Server - Commercial) 1.查看安装脚本 下面2个脚本位于mysql安装目录 share 下,一个是window一个是linux可以用…...

科学养生,开启健康生活新方式
在快节奏的现代生活中,健康养生已成为人们关注的焦点。科学的养生方式不仅能增强体质,还能有效预防疾病,提升生活质量。 合理饮食是健康养生的基础。日常饮食应遵循均衡原则,保证蛋白质、碳水化合物、脂肪、维生素和矿物质的合…...

外贸图片翻译软件推荐用哪些?不损原图画质的跨境图片翻译器,收藏!
在跨境电商的 “江湖” 里,卖家们怀揣着全球 “捞金” 的梦想扬帆起航,可谁能想到,一个看似不起眼的 “小怪兽”—— 图片翻译难题,却常常让大家在 “出海” 途中 “栽跟头”。 电商跨境图片翻译全能王——风车AI翻译 [fengchef…...

3.1/Q1,Charls最新文章解读
文章题目:The impact of chronic diseases and lifestyle on sarcopenia risk in older adults: a population-based longitudinal study DOI:10.3389/fmed.2025.1500915 中文标题:慢性病和生活方式对老年人肌肉减少症风险的影响:…...

简单几步,开启 Intel VT-x 让电脑“解开CPU封印”
#vmware #虚拟机 #cpu虚拟化 # Intel VT-x 前言 你是不是也遇到过这种情况:在尝试运行虚拟机(VM)、安卓模拟器,或者使用 Windows 沙盒、WSL2 等功能时,遇到了类似“此主机支持 Intel VT-x,但 Intel VT-x …...

flutter 插件收集
2025年 1月10号Flutter插件手机 声音转文字 speech_to_text | Flutter package 文字转声音 flutter_tts | Flutter package 堆栈信息 stack_trace | Dart package 跳转到app设置里面 app_settings | Flutter package 轻松的动画 animations | Flutter package 日志打印 t…...
Golang编程拒绝类型不安全
简介 在 Go 中,标准库提供了多种容器类型,如 list、ring、heap、sync.Pool 和 sync.Map。然而,这些容器默认是类型不安全的,即它们可以接受任何类型的值,这可能导致运行时错误。为了提升代码的类型安全性和可维护性&am…...

pyenv-virtualenv(python 版本管理工具)
推荐参考(本人实测有用) 参考文章pyenv 和 pyenv-virtualenv 的安装、配置和使用(仅供参考) 参考文章 pyenvpyenv-virtualenv(仅供参考) pyenv (windows)安装 手动安装 git clone https://github.com/pye…...

DocsGPT remote接口RCE(CVE-2025-0868)
免责声明 本文档所述漏洞详情及复现方法仅限用于合法授权的安全研究和学术教育用途。任何个人或组织不得利用本文内容从事未经许可的渗透测试、网络攻击或其他违法行为。使用者应确保其行为符合相关法律法规,并取得目标系统的明确授权。 对于因不当使用本文信息而造成的任何直…...
VuePress可以做什么?
VuePress 可以做什么 VuePress 是一个基于 Vue.js 的静态站点生成器,专注于文档和内容展示。它结合了 Markdown 的简洁性和 Vue 的灵活性,适合多种场景的开发需求。以下是 VuePress 的主要用途和功能: 1. 技术文档网站 VuePress 最初是为编写 Vue.js 官方文档而设计的,因…...

消息中间件RabbitMQ-01:简要介绍及其Windows安装流程
一、简要介绍 定义:RabbitMQ 是一个开源消息中间件,用于实现消息队列和异步通信。 场景:适用于分布式系统、异步任务处理、消息解耦、高并发访问等场景。 比喻:RabbitMQ 就像是邮政公司,负责在不同系统间安全快速地传…...

(二)读写分离架构、冷热分离架构
文章目录 读写分离架构什么是读写分离结构架构模型优缺点优点缺点 技术案例写情况读情况 冷热分离架构什么是冷热分离架构?架构模型优缺点优点 缺点技术案例读数据写数据 读写分离架构 什么是读写分离结构 读写分离架构针对于数据库。数据库原本负责读写两个功能。 读写分离架…...

TS-300B浊度传感器详解(STM32)
目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 三、程序设计 main文件 ts.h文件 ts.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 TS-300B浊度传感器介绍: 浊度是指溶液对光线通过时所产生的阻碍程度,它包括悬浮物对光的散射和…...