HTML中图片默认不懒加载，需手动为<img>添加loading="lazy"属性；支持lazy（懒加载）、eager（立即加载）、auto（浏览器决定）三值，首屏以下图片适用，背景图不支持，现代浏览器广泛兼容。
HTML 中让图片默认懒加载，最直接的方式就是在 <img> 标签里显式添加 loading="lazy" 属性。它不是“全局默认”，浏览器不会自动给所有图片加这个属性，必须手动写进每个需要懒加载的 <img> 标签中。
loading="lazy" 的基本用法
只需在 <img> 标签中加入 loading="lazy" 即可：
<img src="photo.jpg" alt="风景" loading="lazy">
这个属性告诉浏览器：这张图暂时不用急着加载，等用户快滚动到它附近时再拉取。对长页面、含大量图片的列表页特别有用。
立即学习“前端免费学习笔记（深入）”；
支持的取值和含义
- lazy：启用原生懒加载，适用于大部分离屏图片
- eager：强制立即加载（比如首屏关键图，避免白屏或布局抖动）
-
auto：由浏览器决定（目前多数浏览器把
auto当作eager处理，实际等同于不写该属性）
注意：loading 是枚举属性，只接受这三个值，其他如 "on" 或 "true" 无效，会被忽略。
哪些图片适合加 loading="lazy"
不是所有图片都适合懒加载。推荐加在以下位置：
- 位于首屏以下、需滚动才能看到的图片
- 图文列表、商品卡片、博客文章中的配图
- 响应式图片（
<picture>内的<img>也可加） - 背景图不支持该属性，需用 CSS + Intersection Observer 实现类似效果
不建议加的情况：Logo、首屏轮播图、关键按钮图标——这些应设为 loading="eager" 或干脆不加（默认行为即 eager）。
兼容性和降级处理
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）均支持 loading="lazy"。旧版浏览器会直接忽略该属性，不影响图片显示，属于安全渐进增强。
如果项目需兼容极老环境（如 IE），可结合 JS 库（如 lazysizes）做降级，但纯 HTML 场景下无需额外操作——不支持就当没写，一切照常。
