图片抖动源于html解析时缺失width/height导致首帧布局占位错误，引发cls；必须同时设置width和height属性，仅css或srcset无法替代，占位图尺寸须与真实图一致。
图片降级本身不会抖，抖是因为浏览器在首次解析 HTML 时没拿到确定性尺寸信息；必须为 <img> 同时提供 width 和 height 属性，否则哪怕加了 loading="lazy" 或占位图，也会触发 CLS。
为什么只写 src 却不写 width/height 就一定抖
浏览器渲染第一帧时，如果 <img src="a.jpg"> 没带 width 和 height，它就按 0×0 或默认行高（约 1em）占位；等图片加载完成、真实尺寸回来，整个流式布局重排——下方文字、按钮、广告位全被往下顶。这不是“慢”，是结构缺失。
仅靠 CSS 设置 width: 100% 或 aspect-ratio: 16/9 不行：CSS 计算发生在 HTML 解析之后，无法参与首帧布局预留。
-
srcset+sizes也不能替代：浏览器可能先按默认尺寸占位，再根据sizes调整，造成两次偏移 - iOS Safari 15.4 前不支持
aspect-ratio，仅靠它 fallback 不足 - 服务端渲染（SSR）中若首屏
src是空或占位图但宽高不匹配，抖动会直接出现在用户首屏
占位图尺寸错配是隐藏雷区
用 data-src 或 CSS background-image 实现占位，本质是绕过浏览器原生懒加载机制，反而破坏尺寸锚定。占位图必须通过 src 属性注入，且宽高必须与真实图一致。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img src="placeholder.svg" style="max-width:90%" style="max-width:90%" loading="lazy">✅ 首帧即知尺寸，真实图加载后直接填充 -
<img src="placeholder.svg" style="max-width:90%" style="max-width:90%" loading="lazy">❌ 占位太小，真实图加载后撑开容器，抖动发生 -
<img src="" loading="lazy">或src="data:image/gif;base64,"→ Chrome 直接忽略loading="lazy"，降级为 eager 加载 - CSS
background-image占位完全无效：loading属性对其不生效，也无法用 JS 安全切换
父容器约束失效放大抖动感知
懒加载图片若放在 flex、grid 自适应容器里，或父级设了 overflow: hidden、transform，会导致 Intersection Observer 判定失效，占位图长期挂着，真实图永不加载；或者容器高度塌陷，让抖动从局部变成全局。
- 确保父容器有明确宽高约束：
min-height、aspect-ratio或固定尺寸 - 避免在
transform、will-change、overflow: hidden容器内使用懒加载图片 - 嵌套滚动容器（如局部
overflow: auto）会干扰视口检测，优先用html { overflow-y: scroll }锁定 body 宽度，而非局部滚动 - 首屏图片别全打
loading="lazy"：前 3–5 项应设loading="eager"或配合<link rel="preload">
断网时 JS 降级逻辑根本来不及执行
如果懒加载全靠 JS，那 JS 加载失败 = 全部图片不加载。很多团队花力气优化 JS 降级，却忘了样式层也能让懒加载“失效”。
- 把核心
IntersectionObserver初始化代码内联进<script></script>标签，避免外部请求失败导致逻辑丢失 - 用
if ('IntersectionObserver' in window)做存在性检测，但检测失败时，立刻遍历所有img[data-src]并赋值src，保证图片至少能加载 - 用
display: none隐藏图片容器？Safari 和多数 Android WebView 中会直接跳过该元素，即使后来display改成block，也不会重新触发加载 - 用
opacity: 0或visibility: hidden配合 transition 做淡入？没问题，但 JS 断网未执行时，用户看到的就是黑块或空白
真正难处理的不是你写的那几行 HTML 或 CSS，而是第三方组件库在 mounted 或 onLoad 里悄悄改了图片尺寸、替换了 src、又没同步更新 width/height —— 这类抖动往往查不到源头，只能靠 Performance 面板抓 layout thrashing 时间点，再反向定位 DOM 变更来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
