HTML 原生化懒加载
HTML原生化懒加载：loading=lazy属性（img/iframe）、与Intersection Observer懒加载对比、loading=eager立即加载、decoding=async异步解码、fetchpriority=high/low资源优先级 · 难度：入门 · +10XP
HTML 原生懒加载 —— 让图片按需加载
一个网页可能有几十张图片，但用户打开时只能看到前几张。懒加载就是到了再加载——图片滚动到屏幕内才去加载。
一行代码实现懒加载
<img src="photo.jpg" loading="lazy" alt="照片">只需加 loading="lazy"，浏览器自动延迟加载。不需要JavaScript！
loading属性的三个值
| 值 | 效果 |
|---|---|
| eager | 立即加载（默认） |
| lazy | 延迟加载——接近视口时才加载 |
| auto | 浏览器自己决定 |
配合解码优化
<img src="photo.jpg" loading="lazy" decoding="async" alt="照片">decoding="async"告诉浏览器异步解码，不阻塞其他内容渲染。
动手练习
- 基础练习：做一个含20张图片的长页面，全部加loading="lazy"。
- 进阶应用：用Lighthouse测试加了lazy loading后的性能分数变化。
- 项目实战：做图片画廊——50张图片CSS Grid排列，全部懒加载。