够用，但需确保浏览器支持（chrome 76+、edge 79+、firefox 75+、safari 15.4+），且仅对和生效；必须写在html中、有真实src、初始不在视口、具备宽高属性，否则静默退化为立即加载。
图片懒加载用 loading="lazy" 就够了，但得看浏览器支持情况
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）原生支持 loading="lazy"，无需 JS 就能实现图片懒加载。它只对 <img> 和 <iframe></iframe> 生效，且仅在滚动进入视口前延迟加载。
常见错误是把它加在背景图或通过 CSS background-image 加载的图上——没用，loading 属性不作用于 CSS。
- 必须写在 HTML 标签里：
<img src="photo.jpg" loading="lazy" alt="..."> - 不支持动态插入的 DOM：JS 创建的
img元素需手动设置img.loading = "lazy"，但部分旧版 Safari 会忽略 - 若页面首屏有关键图（比如 banner），建议显式设
loading="eager"避免渲染延迟 - 服务端渲染（SSR）或静态站点生成器（如 Hugo、Jekyll）中直接写入该属性即可生效，无需额外打包配置
在线运行环境里怎么验证懒加载是否真起作用？
很多“HTML 在线运行”工具（如 CodePen、JSFiddle、CodeSandbox）默认开启预览 iframe，这会导致 loading="lazy" 行为异常——因为 iframe 的视口和主窗口不一致，浏览器可能误判“已在视口内”，直接加载所有图。
正确验证方式是：把代码保存为本地 .html 文件，用 Chrome 直接双击打开（或用 VS Code Live Server 启动），再打开 DevTools → Network 面板，勾选 Disable cache，然后滚动页面观察 img 请求是否延迟出现。
- 关键指标：首屏图片应立即请求，下方图片在滚动接近时才触发
src加载 - 如果所有图片都在页面加载时一并发出请求，检查是否用了 iframe 预览、是否写了
srcset但没配sizes导致浏览器提前加载高分辨率图 - 移动端 Safari 对
loading="lazy"支持较保守，有时会降级为 eager，需真机测试
前端性能测试别只盯着 Lighthouse 分数
Lighthouse 的 “Defer offscreen images” 审计项只检查有没有用 loading="lazy" 或 JS 懒加载方案，不验证实际加载时机或资源水位。它可能显示“通过”，但用户仍感知卡顿——比如懒加载的图太大、没压缩、没配 decoding="async"。
真实测试要组合三类工具：
- Network 面板：看
Waterfall中图片请求是否随滚动分批出现；关注Start Time和End Time是否明显错开 - Performance 面板录制整页滚动过程：筛选
img事件，看Decode Image和Layout是否集中爆发（说明图片尺寸突变或未设宽高） - WebPageTest（webpagetest.org）：选真实设备（如 Moto G4）、3G 慢网，查看
Speed Index和Visual Progress曲线，确认图片是否按滚动节奏逐步渲染
特别注意：如果用了 IntersectionObserver 手写懒加载，务必加 rootMargin（如 "0px 0px 200px 0px"），否则用户快速滚动时会出现“闪图”——图片刚进入视口就加载，但还没来得及渲染完就滑走了。
loading="lazy" 不是银弹，大图和 WebP 格式才是硬功夫
懒加载只是推迟请求，不能减少体积。一张 5MB 的 JPG 即使懒加载，滚动到它时仍会卡住主线程解码。真正影响性能的是图片本身。
- 必须配宽高属性：
<img style="max-width:90%" style="max-width:90%">，否则懒加载 + 无尺寸 = 滚动时 Layout Shift（CLS 值飙升） - 优先用 WebP/AVIF：同画质下体积比 JPG 小 30%~50%，CDN（如 Cloudflare、Vercel）通常自动转码，但需确保响应头含
Content-Type: image/webp - 服务端要支持
Accept: image/webp判定，并 fallback 到 JPG；客户端可通过<picture></picture>显式控制：<source srcset="a.webp" type="image/webp"><img src="a.jpg"></source>
最常被忽略的一点：懒加载和图片格式优化必须一起上线。单独做任意一项，都可能让性能收益打五折。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
