loading="lazy"必须直接写在标签上，css无法触发原生懒加载；其生效前提为图片有明确宽高（属性或css宽高比）、不在display: none等隐藏容器内、且浏览器支持该特性。
loading="lazy" 必须直接写在 img 标签上，CSS 不能触发懒加载
浏览器原生懒加载只响应 loading 属性，且仅在 HTML 解析阶段读取——CSS 里写 loading: lazy 完全无效。所有试图用 CSS 控制加载时机的做法（比如 background-image + opacity: 0、visibility: hidden 或伪元素占位）都不会延迟图片请求。Chrome/Firefox/Safari 均会在解析到 src 的瞬间发起网络请求，无论是否可见、是否隐藏。
真正起作用的 CSS 配合点只有三个：宽高、容器布局、占位样式
原生 loading="lazy" 能安全工作的前提，是浏览器能预估图片尺寸，否则会跳过懒加载或引发 CLS（累积布局偏移）。必须做到：
-
img标签显式带width和height属性（不是仅靠 CSS 设置），例如<img src="a.jpg" style="max-width:90%" style="max-width:90%" loading="lazy"> - 若用响应式图片，
sizes必须存在且合理，否则浏览器无法判断应加载多大尺寸的资源 - 首屏外图片建议包裹在有明确 aspect-ratio 的容器中，避免 JS 动态撑开导致懒加载失效；可用
aspect-ratio: 4/3（Safari 15.4+ 支持）或 padding-bottom hack
为什么 display: none 或 overflow: hidden 容器里的 img 可能不懒加载
部分浏览器（尤其是旧版 Firefox 和某些安卓 WebView）无法正确判断被裁剪或隐藏容器内的图片是否在视口内，结果直接忽略 loading="lazy" 并立即加载。更麻烦的是：table 内部、display: contents 父元素、或 SSR 渲染后 JS 还未执行时的 hydration 阶段，都可能出现“本该懒加载却提前请求”的情况。
- 不要把
img放进display: none的父容器里再指望它懒加载 - 避免在
<table> 或 <code><details></details>展开前就渲染含loading="lazy"的图片 - 服务端模板输出时，确保首屏关键图明确设
loading="eager"，防止 hydration 过程中被误判 - 初始状态：
img设src为空或占位图，加class="lazy"，CSS 控制灰色背景或骨架动画 - 加载中：JS 触发后加
class="loading"，CSS 用opacity或filter: blur()表示过渡 - 加载完成：JS 设置
img.src后加class="loaded"，CSS 用transition: opacity 0.2s实现淡入 - 务必在回调里调用
observer.unobserve(img)，否则持续监听已加载图片会浪费内存
想用 CSS 控制加载状态？只能配合 JS 手动实现
如果你需要渐显、骨架屏、加载失败 fallback 或自定义阈值（比如滚动到离视口 200px 就开始加载），loading="lazy" 不够用。这时得用 IntersectionObserver，而 CSS 只负责呈现状态：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
