图片懒加载全解析：从传统 Scroll 到现代 IntersectionObserver
在前端开发的世界里，性能优化永远是绕不开的核心话题✨。尤其是在电商、资讯、社交这类图片密集型的页面中，大量图片的加载往往会成为页面性能的 “绊脚石”—— 首屏加载慢吞吞，用户没耐心直接离开；非可视区域的图片白白消耗带宽，服务器压力也徒增。
而图片懒加载（Lazy Load）作为前端性能优化的 “明星方案”，正是为解决这些痛点而生。今天我们就从概念、原理到实战，全方位拆解图片懒加载的实现逻辑，对比传统与现代方案的优劣，让你彻底吃透这个高频考点！
一、什么是图片懒加载？🤔
图片懒加载，本质是一种 “按需加载” 的资源加载策略：浏览器解析页面时，不会一次性加载所有<img>标签对应的图片，而是先加载首屏可视区域内的图片；当用户滚动页面，使原本隐藏在视口外的图片进入可视区域（Viewport）时，再触发这些图片的真实加载。
核心实现逻辑的关键是 “资源延迟绑定”：将图片的真实地址暂存到data-src（自定义属性）中，而非直接赋值给src属性（src先指向体积极小的占位图，如 1x1 透明图），只有满足 “进入视口” 条件时，才把data-src的值替换到src中，触发真实的图片 HTTP 请求。
二、为什么需要图片懒加载？💡
没有懒加载的页面，浏览器解析<img>标签时，只要看到src属性就会立刻发起请求，这会带来两个致命问题：
- 首屏加载速度慢：首页的所有图片请求会和 HTML、CSS、JS 的加载 “抢占” 网络资源，导致首屏 HTML 渲染、样式加载被阻塞，用户面对空白页面的等待时间变长（数据显示，首屏加载超过 3 秒，用户流失率超 50%）。
- 无效请求浪费：视口之外的图片（如下滚才能看到的列表项），加载后用户可能永远不会滚动到对应位置，既浪费了用户的移动带宽（尤其是移动端），也增加了服务器的并发压力。
而懒加载的引入，恰好解决了这些问题：
✅ 提升用户体验：首屏内容快速渲染，用户无需长时间等待；
✅ 节省带宽资源：仅加载用户能看到的图片，减少无效请求；
✅ 降低服务器压力：分散图片请求的时间和并发量，避免瞬间高并发。
三、图片懒加载的解决方案核心🔑
所有懒加载方案都围绕两个核心原则展开，缺一不可：
1. 首屏优先
暂时不需要加载的图片，src属性先指向小体积占位图（如 1x1 透明图、加载中占位图），让浏览器优先加载 HTML、CSS、JS 等核心资源，保证首屏内容快速呈现。
2. 按需加载
通过监听页面滚动（或原生 API 监听交集状态），实时判断图片是否进入视口；只有当图片进入视口时，才将data-src中的真实地址赋值给src，触发真实图片的加载。
四、如何实现图片懒加载？🛠️
接下来我们从代码层面，拆解传统方案和现代方案的实现逻辑，对比两者的优劣。
1. 传统方案：监听滚动事件（onscroll + 节流）
这是早期懒加载的主流实现方式，核心是 “监听滚动 + 节流控制 + 手动计算位置”。
1.1 核心思路
① 图片预处理：给非首屏图片添加lazy类，src赋值占位图，真实地址存在data-src自定义属性中；② 节流控制：给scroll事件绑定节流函数，避免高频触发导致性能卡顿；③ 视口判断：滚动时遍历所有lazy图片，通过getBoundingClientRect()计算图片与视口的位置关系，判断是否进入视口；④ 加载图片：若图片进入视口，将data-src赋值给src，移除lazy类、添加loaded类（用于样式过渡），并移除data-src属性；⑤ 初始化检查：页面加载完成后，先执行一次懒加载判断，避免首屏内的lazy图片未加载。
1.2 代码
javascript
// 节流函数：控制函数高频触发，避免滚动时性能卡顿 function throttle(func, wait) { let timeout = null; // 定时器标识，用于控制执行时机 return function () { if (!timeout) { // 若定时器不存在，说明可以执行函数 timeout = setTimeout(() => { func.apply(this, arguments); // 执行目标函数，保留this和参数 timeout = null; // 执行完成后重置定时器 }, wait); } }; } function lazyLoad() { const lazyImages = document.querySelectorAll('img.lazy'); // 获取所有待加载的图片 const windowHeight = window.innerHeight; // 获取视口高度 lazyImages.forEach(img => { // 跳过已加载的图片（已移除lazy类） if (!img.classList.contains('lazy')) return; const rect = img.getBoundingClientRect(); // 获取图片的位置信息（相对于视口） // 核心判断：图片顶部进入视口下方，且底部未完全离开视口上方 → 图片进入视口 if (rect.top < windowHeight && rect.bottom > 0) { if (img.dataset.src) { console.log('Loading image via Scroll:', img.dataset.src); img.src = img.dataset.src; // 替换src，触发真实图片加载 img.removeAttribute('data-src'); // 移除自定义属性，避免重复加载 img.classList.remove('lazy'); // 移除lazy类，标记为已加载 img.classList.add('loaded'); // 添加loaded类，实现透明度过渡 } } }); } // 节流处理懒加载函数，200ms执行一次 const throttledLazyLoad = throttle(lazyLoad, 200); // 监听滚动事件，触发节流后的懒加载 document.addEventListener('scroll', throttledLazyLoad); // 窗口大小变化时，重新判断图片位置 window.addEventListener('resize', throttledLazyLoad); // 页面加载完成后，初始化检查首屏图片 document.addEventListener('DOMContentLoaded', lazyLoad);1.3 代码实现效果
观察界面滚动图片变化与控制台打印：
1.4 该方案的缺点
❌ 性能损耗：即使加了节流，scroll事件仍会高频触发，存在一定的性能开销；❌ 代码冗余：需要手动计算元素与视口的位置关系，逻辑易出错，维护成本高；❌ 适配性差：在移动端、嵌套滚动等复杂布局中，位置计算容易失效，适配成本高。
1.5 关键 API 解析
throttle (func, wait)：自定义节流函数，控制高频事件触发频率，避免性能卡顿。func：需要被节流的目标函数（此处为lazyLoad）；wait：节流等待时间（毫秒），此处为 200ms，即函数每 200ms 最多执行一次；
document.querySelectorAll ('img.lazy')：根据CSS选择器获取所有带lazy类的待加载图片，返回NodeList集合。window.innerHeight：获取当前浏览器视口的高度，用于判断图片是否进入视口。Element.classList.contains ('lazy')：布尔值，判断图片元素是否包含lazy类，跳过已加载的图片。Element.getBoundingClientRect ()：获取元素相对于视口的位置信息（返回DOMRect对象），包含top（元素顶部距视口顶部距离）、bottom（元素底部距视口顶部距离）等属性。img.removeAttribute ('data-src')：移除图片的data-src属性，避免重复读取。Element.classList.remove ('lazy')：移除图片的lazy类，标记为已加载。Element.classList.add ('loaded')：为图片添加loaded类，实现加载后的样式过渡。document.addEventListener ('scroll', throttledLazyLoad)：监听页面滚动事件，触发节流后的懒加载函数。window.addEventListener ('resize', throttledLazyLoad)：监听窗口大小变化事件，重新判断图片位置，适配视口尺寸变化。document.addEventListener ('DOMContentLoaded', lazyLoad)：监听DOM加载完成事件，初始化执行懒加载函数，检查首屏图片是否需要加载。
2. 现代方案：IntersectionObserver（推荐）🌟
为了解决传统方案的痛点，浏览器原生提供了IntersectionObserverAPI（交集观察器），专门用于监听 “元素是否进入视口 / 与其他元素产生交集”，是目前懒加载的最优解。
2.1 核心思路
① 浏览器原生支持：无需手动监听scroll、resize等事件，由浏览器底层优化执行逻辑；② 交集监听：创建IntersectionObserver实例，指定观察的目标元素（lazy图片）；③ 自动判断：当目标元素与视口产生交集（满足阈值条件）时，触发回调函数；④ 加载图片：在回调中替换data-src到src，移除lazy类，停止观察该元素（避免重复触发）；⑤ 降级处理：若浏览器不支持该 API，直接加载所有图片，保证功能可用。
2.2 代码
javascript
document.addEventListener("DOMContentLoaded", function() { const lazyImages = document.querySelectorAll("img.lazy"); // 获取所有待加载图片 // 检查浏览器是否支持IntersectionObserver if ("IntersectionObserver" in window) { // 创建交集观察器实例 const imageObserver = new IntersectionObserver(function(entries, observer) { // 遍历所有被观察的元素的交集状态 entries.forEach(function(entry) { // entry.isIntersecting：元素是否进入视口（产生交集） if (entry.isIntersecting) { const img = entry.target; // 获取当前触发的图片元素 console.log('Loading image via IntersectionObserver:', img.dataset.src); img.src = img.dataset.src; // 替换src，加载真实图片 img.classList.remove("lazy"); // 标记为已加载 img.classList.add("loaded"); // 添加样式过渡类 observer.unobserve(img); // 停止观察该图片，避免重复触发 } }); }, { root: null, // 观察的根元素：null表示视口 rootMargin: "0px", // 根元素的边距，扩展/缩小观察区域 threshold: 0.1 // 阈值：图片10%可见时触发回调 }); // 遍历所有lazy图片，开始观察 lazyImages.forEach(function(image) { imageObserver.observe(image); }); } else { // 降级处理：不支持时直接加载所有图片 console.log("IntersectionObserver not supported, loading all images."); lazyImages.forEach(function(img) { img.src = img.dataset.src; img.classList.remove("lazy"); img.classList.add("loaded"); }); } });2.3 代码实现效果
观察界面滚动图片变化与控制台打印：
2.4 该方案的优势
✅ 无性能损耗：浏览器底层实现，无需手动节流 / 防抖，性能远超scroll监听；✅ 代码简洁：无需手动计算元素位置，逻辑清晰，维护成本低；✅ 适配性强：完美兼容移动端、嵌套滚动等复杂布局；✅ 可扩展：支持自定义观察规则（如rootMargin扩展观察区域、threshold调整触发阈值）。
2.5 关键 API 解析
IntersectionObserver(callback, options)：构造函数，创建交集观察器实例。callback：交集状态变化时的回调函数，接收两个参数：entries：数组，每个元素是IntersectionObserverEntry对象，包含元素的交集状态、位置等信息；observer：当前的IntersectionObserver实例。
options：配置项（可选）：root：观察的根元素，默认null（视口）；rootMargin：根元素的边距，格式同 CSS margin（如 “100px 0”），可扩展 / 缩小观察区域；threshold：触发回调的阈值（0~1），0 表示元素刚进入视口就触发，1 表示元素完全进入视口才触发。
entry.isIntersecting：布尔值，判断元素是否与根元素产生交集（进入视口）。observer.observe(target)：开始观察指定的目标元素。observer.unobserve(target)：停止观察指定的目标元素。
五、CSS 与 HTML 代码
CSS：
<style> /* 页面基础样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; } /* * 空白间隔区样式 * 用于撑开页面高度，模拟长页面滚动效果 */ .spacer { height: 150vh; /* 核心：高度设置为 1.5 倍视口高度 (150vh) */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 内容从顶部开始排列 */ padding-top: 50vh; /* 核心：提示词距离顶部 1/3 (50vh / 150vh ≈ 0.33) */ box-sizing: border-box; background-color: #f9f9f9; border-bottom: 1px solid #ddd; } /* 图片容器样式 */ .image-wrapper { padding: 50px 0; background-color: #fff; min-height: 400px; /* 最小高度，防止图片加载前高度塌陷 */ display: flex; align-items: center; justify-content: center; } /* * 懒加载图片样式 * .lazy 类表示图片尚未加载 */ img.lazy { max-width: 80%; height: auto; display: block; margin: 0 auto; opacity: 0.3; /* 初始低透明度，显示占位效果 */ transition: opacity 0.5s; /* 添加过渡效果，使加载更平滑 */ } /* * 图片加载完成后的样式 * .loaded 类在 JS 中加载完成后添加 */ img.loaded { opacity: 1; /* 恢复完全不透明 */ } h1, h2 { color: #333; } </style>HTML
<body> <!-- 第一部分：首屏空白区 作用：展示标题和提示，迫使用户向下滚动 --> <div class="spacer"> <h1>传统懒加载方案</h1> <h2>⬇️ 向下滑动加载第一张图片 ⬇️</h2> </div> <!-- 第二部分：第一张图片 >六、面试官会问🤨- 图片懒加载的核心原理是什么？
答：核心是 “按需加载”，将非首屏图片的真实地址存到data-src（自定义属性），src指向占位图；通过监听滚动（传统）或IntersectionObserver（现代）判断图片是否进入视口，进入后将data-src赋值给src，触发真实图片加载。
- 传统懒加载方案中，为什么要使用节流函数？
答：scroll事件会在滚动过程中高频触发（每秒数十次），若直接执行懒加载逻辑，会导致大量 DOM 操作和计算，引发页面卡顿；节流函数能控制函数在指定时间内只执行一次，减少性能损耗。
- IntersectionObserver 相比传统 scroll 方案有哪些优势？
答：① 性能更好：浏览器底层优化，无需手动节流；② 代码更简洁：无需手动计算元素位置；③ 适配性强：兼容复杂布局；④ 可扩展：支持自定义观察规则。
- 如何判断一个元素是否进入视口？
答：传统方案用element.getBoundingClientRect()获取元素的位置信息，判断rect.top < window.innerHeight && rect.bottom > 0；现代方案直接通过IntersectionObserver的isIntersecting属性判断。
- 懒加载的降级方案是什么？
答：若浏览器不支持IntersectionObserver（如部分老旧浏览器），直接遍历所有lazy图片，将data-src赋值给src，保证图片能正常加载。
七、结语🎯
图片懒加载作为前端性能优化的 “基础操作”，其核心始终是 “按需加载”—— 优先保证首屏体验，减少无效资源消耗。传统的scroll+节流方案兼容旧浏览器，但存在性能和适配痛点；而IntersectionObserver作为现代方案，凭借浏览器原生优化、简洁的代码逻辑，成为当前懒加载的首选。
在实际开发中，我们需要根据项目的兼容需求选择方案：若需兼容老旧浏览器，可采用 “IntersectionObserver+scroll 降级” 的混合方案；若面向现代浏览器，直接使用IntersectionObserver即可。
性能优化没有银弹，但图片懒加载是列表类页面（电商、资讯、社交）的 “必做优化”，小小的改动就能显著提升页面加载速度和用户体验。希望这篇文章能帮你彻底吃透图片懒加载，无论是面试还是实战，都能游刃有余！
