前言
当我们进入某个包含大量图片的网站时，网页内的图片却迟迟加载不出来，给我们带来了极差的用户体验，而懒加载技术，正是解决这类问题的有效手段之一。
传统的滚动监听懒加载方式在过去发挥了重要作用，但随着技术的不断革新，2026年的今天，我们有了更为现代、高效的方案可供选择。接下来，就让我们深入探究一番。
什么是懒加载 ？
懒加载（Lazy Loading）是前端开发中延迟加载非关键资源的优化技术，通过仅在资源进入用户可视区域时加载，显著减少初始请求数、降低内存占用，提升页面加载速度和用户体验。
核心原理：按需加载的本质
懒加载的核心逻辑基于视窗检测和条件触发，分为三步：
- 资源暂存:将真实的资源地址（如图片的链接）存储在HTML5的自定义属性（如data-src）中，而非直接赋值给src，避免初次加载。
- 视窗检测：通过监听滚动事件或者使用浏览器API（如
Intersection Observer），判断资源是否进入用户的可视区域。 - 动态加载：当资源进入视窗内，将data-src的值赋值给src，触发浏览器加载真实资源。
其本质就是将“一次性全量加载”转化为“按需增量加载”，减少初始页面的资源请求和渲染压力。
实现方法
1. 原生JavaScript实现 - 传统滚动监听
定义核心变量
- 作用：获取当前浏览器窗口的可视高度（单位：像素），用于判断图片是否进入用户视野。
懒加载核心函数
- getBoundingClientRect()： 返回元素的位置信息（
top/bottom/left/right等），是判断元素是否在视口内的核心依据。 - 自定义属性：
data-origin存储图片的真实URL（避免初始加载），lazyload标记图片为“待加载状态”
初始化与滚动监听
- 初始化执行：页面加载完成后立即调用
lazyLoad()，确保首屏图片正常显示。 - 滚动监听：当用户滚动页面时，持续判断后续图片是否进入视口，但直接监听
scroll会导致事件触发过于频繁（每秒可能触发数十次），因此需要节流函数优化。
节流函数 - throttle()
- 核心作用：限制
lazyLoad的执行频率（示例中为每1000毫秒执行一次），避免滚动时频繁触发函数导致性能浪费。 - 闭包特性：
preTime变量被闭包保存，每次滚动时都会对比“当前时间”与“上次执行时间”，确保在规定间隔内只执行一次
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { display: block; height: 200px; margin-bottom: 20px; } </style> </head> <body> <img src="" lazyload="true" />- item.isIntersecting: 布尔值，直接表示元素是否进入视口（无需手动计算位置）。
- item.target: 当前被观察的 DOM 元素（即图片）。
- io.unobserve(item.target): 停止对已加载图片的观察，避免不必要的资源消耗。
批量观察待加载图片
![]()
将页面中所有标记为lazyload的图片注册到观察器中，浏览器会自动监听它们的视口可见性变化。
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { display: block; height: 200px; margin-bottom: 20px; } </style> </head> <body> <img src="" lazyload="true" data-origin="图片地址" alt=""> <!-- 多张图片省略 --> <script> const io = new IntersectionObserver( (entries) => { entries.forEach(item => { if (item.isIntersecting) { item.target.src = item.target.dataset.origin item.target.removeAttribute('lazyload') io.unobserve(item.target) } }) } ) const imgs = document.querySelectorAll('img[lazyload]') imgs.forEach(img => { io.observe(img) } ) </script> </body> </html>
优点：性能最优：浏览器异步处理，不阻塞主线程。代码极简：无需手动计算位置或处理滚动；自动停止观察：加载后立即解除监听，节省资源。
缺点：兼容性有限：IE 浏览器不支持（需降级方案）
总结
懒加载技术作为优化网页性能的有效手段，在提升用户体验方面发挥着重要作用。从原理上看，它按需加载图片，避免资源浪费，显著减少页面初始加载时间。
原生JavaScript方案凭借基础DOM操作与事件监听，具备良好兼容性与灵活性，虽需手动处理细节，但能精准把控加载逻辑；
Intersection Observer则更为简洁高效，自动监听元素可见性，大幅降低开发工作量，且性能表现出色。
在实际应用中，开发者可依据项目需求、浏览器兼容性等因素灵活选择。随着互联网对性能要求持续提升，懒加载技术将不断演进，为打造更流畅、高效的网页体验贡献力量 ✨。
