核心内容摘要
窒息的爱恋：当痴迷吞噬一切
图片懒加载全解析从传统 Scroll 到现代 IntersectionObserver在前端开发的世界里性能优化永远是绕不开的核心话题✨。
尤其是在电商、资讯、社交这类图片密集型的页面中大量图片的加载往往会成为页面性能的 “绊脚石”—— 首屏加载慢吞吞用户没耐心直接离开非可视区域的图片白白消耗带宽服务器压力也徒增。
而图片懒加载Lazy Load作为前端性能优化的 “明星方案”正是为解决这些痛点而生。
今天我们就从概念、原理到实战全方位拆解图片懒加载的实现逻辑对比传统与现代方案的优劣让你彻底吃透这个高频考点
什么是图片懒加载图片懒加载本质是一种 “按需加载” 的资源加载策略浏览器解析页面时不会一次性加载所有img标签对应的图片而是先加载首屏可视区域内的图片当用户滚动页面使原本隐藏在视口外的图片进入可视区域Viewport时再触发这些图片的真实加载。
核心实现逻辑的关键是 “资源延迟绑定”将图片的真实地址暂存到data-src自定义属性中而非直接赋值给src属性src先指向体积极小的占位图如 1x1 透明图只有满足 “进入视口” 条件时才把data-src的值替换到src中触发真实的图片 HTTP 请求。
为什么需要图片懒加载没有懒加载的页面浏览器解析img标签时只要看到src属性就会立刻发起请求这会带来两个致命问题首屏加载速度慢首页的所有图片请求会和 HTML、CSS、JS 的加载 “抢占” 网络资源导致首屏 HTML 渲染、样式加载被阻塞用户面对空白页面的等待时间变长数据显示首屏加载超过 3 秒用户流失率超 50%。
无效请求浪费视口之外的图片如下滚才能看到的列表项加载后用户可能永远不会滚动到对应位置既浪费了用户的移动带宽尤其是移动端也增加了服务器的并发压力。
而懒加载的引入恰好解决了这些问题✅ 提升用户体验首屏内容快速渲染用户无需长时间等待✅ 节省带宽资源仅加载用户能看到的图片减少无效请求✅ 降低服务器压力分散图片请求的时间和并发量避免瞬间高并发。
图片懒加载的解决方案核心所有懒加载方案都围绕两个核心原则展开缺一不可
首屏优先暂时不需要加载的图片src属性先指向小体积占位图如 1x1 透明图、加载中占位图让浏览器优先加载 HTML、CSS、JS 等核心资源保证首屏内容快速呈现。
按需加载通过监听页面滚动或原生 API 监听交集状态实时判断图片是否进入视口只有当图片进入视口时才将data-src中的真实地址赋值给src触发真实图片的加载。
如何实现图片懒加载️接下来我们从代码层面拆解传统方案和现代方案的实现逻辑对比两者的优劣。
传统方案监听滚动事件onscroll 节流这是早期懒加载的主流实现方式核心是 “监听滚动 节流控制 手动计算位置”。
1 核心思路① 图片预处理给非首屏图片添加lazy类src赋值占位图真实地址存在data-src自定义属性中② 节流控制给scroll事件绑定节流函数避免高频触发导致性能卡顿③ 视口判断滚动时遍历所有lazy图片通过getBoundingClientRect()计算图片与视口的位置关系判断是否进入视口④ 加载图片若图片进入视口将data-src赋值给src移除lazy类、添加loaded类用于样式过渡并移除data-src属性⑤ 初始化检查页面加载完成后先执行一次懒加载判断避免首屏内的lazy图片未加载。
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
{ 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,
; // 监听滚动事件触发节流后的懒加载 document.addEventListener(scroll, throttledLazyLoad); // 窗口大小变化时重新判断图片位置 window.addEventListener(resize, throttledLazyLoad); // 页面加载完成后初始化检查首屏图片 document.addEventListener(DOMContentLoaded, lazyLoad);
3 代码实现效果观察界面滚动图片变化与控制台打印
4 该方案的缺点❌ 性能损耗即使加了节流scroll事件仍会高频触发存在一定的性能开销❌ 代码冗余需要手动计算元素与视口的位置关系逻辑易出错维护成本高❌ 适配性差在移动端、嵌套滚动等复杂布局中位置计算容易失效适配成本高。
5 关键 API 解析throttle (func, wait)自定义节流函数控制高频事件触发频率避免性能卡顿。
func需要被节流的目标函数此处为lazyLoadwait节流等待时间毫秒此处为 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加载完成事件初始化执行懒加载函数检查首屏图片是否需要加载。
现代方案IntersectionObserver推荐为了解决传统方案的痛点浏览器原生提供了IntersectionObserverAPI交集观察器专门用于监听 “元素是否进入视口 / 与其他元素产生交集”是目前懒加载的最优解。
1 核心思路① 浏览器原生支持无需手动监听scroll、resize等事件由浏览器底层优化执行逻辑② 交集监听创建IntersectionObserver实例指定观察的目标元素lazy图片③ 自动判断当目标元素与视口产生交集满足阈值条件时触发回调函数④ 加载图片在回调中替换data-src到src移除lazy类停止观察该元素避免重复触发⑤ 降级处理若浏览器不支持该 API直接加载所有图片保证功能可用。
2 代码javascriptdocument.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:
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); }); } });
3 代码实现效果观察界面滚动图片变化与控制台打印
4 该方案的优势✅ 无性能损耗浏览器底层实现无需手动节流 / 防抖性能远超scroll监听✅ 代码简洁无需手动计算元素位置逻辑清晰维护成本低✅ 适配性强完美兼容移动端、嵌套滚动等复杂布局✅ 可扩展支持自定义观察规则如rootMargin扩展观察区域、threshold调整触发阈值。
5 关键 API 解析IntersectionObserver(callback, options)构造函数创建交集观察器实例。
callback交集状态变化时的回调函数接收两个参数entries数组每个元素是IntersectionObserverEntry对象包含元素的交集状态、位置等信息observer当前的IntersectionObserver实例。
options配置项可选root观察的根元素默认null视口rootMargin根元素的边距格式同 CSS margin如 “100px 0”可扩展 / 缩小观察区域threshold触发回调的阈值0~10 表示元素刚进入视口就触发1 表示元素完全进入视口才触发。
entry.isIntersecting布尔值判断元素是否与根元素产生交集进入视口。
observer.observe(target)开始观察指定的目标元素。
observer.unobserve(target)停止观察指定的目标元素。
CSS 与 HTML 代码CSSstyle /* 页面基础样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; } /* * 空白间隔区样式 * 用于撑开页面高度模拟长页面滚动效果 */ .spacer { height: 150vh; /* 核心高度设置为
5 倍视口高度 (150vh) */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 内容从顶部开始排列 */ padding-top: 50vh; /* 核心提示词距离顶部 1/3 (50vh / 150vh ≈
0.
*/ 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:
3; /* 初始低透明度显示占位效果 */ transition: opacity
5s; /* 添加过渡效果使加载更平滑 */ } /* * 图片加载完成后的样式 * .loaded 类在 JS 中加载完成后添加 */ img.loaded { opacity: 1; /* 恢复完全不透明 */ } h1, h2 { color: #333; } /styleHTMLbody !--
分首屏空白区 作用展示标题和提示迫使用户向下滚动 -- div classspacer 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作为现代方案凭借浏览器原生优化、简洁的代码逻辑成为当前懒加载的首选。
在实际开发中我们需要根据项目的兼容需求选择方案若需兼容老旧浏览器可采用 “IntersectionObserverscroll 降级” 的混合方案若面向现代浏览器直接使用IntersectionObserver即可。
性能优化没有银弹但图片懒加载是列表类页面电商、资讯、社交的 “必做优化”小小的改动就能显著提升页面加载速度和用户体验。
希望这篇文章能帮你彻底吃透图片懒加载无论是面试还是实战都能游刃有余