图片懒加载的核心是延迟图片请求至进入视口时，优先使用loading="lazy"属性，兼容性不足或需自定义行为时用Intersection Observer手动实现，并需协同响应式与WebP适配。
图片懒加载的核心是让图片在进入视口（viewport）时才开始加载，避免页面初始化时一次性请求大量图片资源，从而减少首屏渲染时间和带宽消耗。现代浏览器原生支持 loading="lazy"，但为兼容性与更精细控制，常配合 Intersection Observer API 手动实现。
使用原生 loading="lazy" 属性（最简方案）
适用于大多数常规图片，无需 JS，兼容 Chrome 76+、Firefox 75+、Edge 79+：
- 直接在
<img>标签上添加loading="lazy"，浏览器自动处理滚动时的加载时机 - 仅对
<img>和<iframe>生效；loading="eager"可强制立即加载（如首屏关键图） - 注意：该属性不触发 JS 事件，无法监听加载状态或做 fallback 处理
用 Intersection Observer 手动实现（推荐进阶方案）
适合需要自定义行为（如占位图、加载动画、错误重试、兼容老浏览器）的场景：
- 将图片真实地址存在
data-src或data-srcset中，src设为空或低清占位图 - 创建
IntersectionObserver实例，监听图片是否进入视口（可设rootMargin提前触发，如"100px"） - 回调中将
data-src赋给src，并调用unobserve()避免重复触发 - 可结合
img.onload和img.onerror做加载成功/失败处理（例如显示默认图或重试）
配合响应式与 WebP 自适应（进一步优化）
懒加载不是孤立操作，需与资源格式、尺寸策略协同：
立即学习“Java免费学习笔记（深入）”；
- 用
<picture>+source[type="image/webp"]提供现代格式，降级到 JPEG/PNG - 在
data-srcset中写多尺寸地址（如"small.jpg 480w, medium.jpg 1024w"），配合data-sizes让浏览器选最适图 - 懒加载逻辑中动态设置
srcset和sizes，确保响应式能力不丢失
避免常见陷阱
看似简单，实操中容易踩坑：
- 不要在 CSS 中用
background-image实现懒加载——无法被loading="lazy"识别，且 Intersection Observer 监听的是元素本身，非背景图加载 - 服务端渲染（SSR）页面需注意：服务端不执行 JS，初始 HTML 中图片仍应有占位结构（如空
src+data-src），JS 在客户端挂载后接管 - SPA 路由切换后新页面的图片需重新初始化 observer，避免漏监听
- 慎用
getBoundingClientRect()+scroll事件手动判断——性能差、易抖动，优先用 Intersection Observer
不复杂但容易忽略细节。核心就三点：延迟请求、按需解绑、格式适配。从 loading="lazy" 入手，再按需升级到 Observer 方案，基本覆盖绝大多数性能需求。
