图片加载慢导致居中抖动的根本原因是未预留尺寸：浏览器渲染时图片高度塌陷，容器撑开后破坏flex/grid/margin-auto居中；解决关键是通过width/height、aspect-ratio或padding-top技巧提前锁定容器高度。
图片加载慢本身不直接导致“居中抖动”，真正的问题是：浏览器在图片尺寸未知时无法预留空间，容器高度从 0 突然撑开，破坏了原本靠 flex / grid / margin-auto 实现的居中逻辑——视觉上就是“先居中、再下掉”。解决核心不是加速加载，而是让居中容器在图片加载前就拥有稳定尺寸。
必须给 <img> 设置宽高或宽高比
没有 width 和 height 属性（或 CSS aspect-ratio），浏览器渲染时把 <img> 当作行内元素处理，初始高度≈文字行高（通常 20px 左右），远小于真实图片高度。等图片加载完成，父容器突然变高，flex 或 margin 居中立刻失效，内容“掉下来”。
- 优先写 HTML 原生属性：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="...">—— 浏览器首帧即知 intrinsic 尺寸，兼容性最好 - 响应式场景用 CSS
aspect-ratio：img { aspect-ratio: 3 / 2; width: 100%; height: auto; }—— Chrome 88+ / Firefox 89+ / Safari 15.4+ 支持 - 老浏览器兜底可用 padding-top 技巧，但需额外 wrapper 元素和绝对定位，复杂度高，非必要不推荐
居中容器不能依赖图片自身尺寸做布局
常见错误是把 <img> 直接扔进 flex 容器并设 margin: auto，却没限制其收缩行为。当图片未加载时，<img> 高度塌陷，flex 容器高度也塌陷，居中自然失效；加载后又撑开，整个过程反复拉扯。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给图片加
flex-shrink: 0，防止被压缩变形（尤其在宽度受限的 flex 容器中） - 更稳妥做法：用 wrapper 包一层，如
<div class="img-wrapper"><img></div>，然后对 wrapper 设aspect-ratio或固定尺寸，<img>设width: 100%; height: 100%; object-fit: cover; - 避免在
<img>父级同时使用transform+overflow: hidden—— 这会让 Chrome 误判滚动根节点，导致loading="lazy"失效，间接加剧抖动
loading="lazy" 必须配合占位图与过渡动画
原生懒加载只控制请求时机，不提供视觉缓冲。如果 src 是空或无效路径，图片区域直接空白，居中状态瞬间丢失。用户看到的是“先有居中空白块，再闪出图片”，主观感受就是抖动。
-
src必须指向一个有效占位图，比如 1×1 透明 GIF：src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - 禁用
data-src替代src—— 浏览器不识别它，不会渲染任何占位内容 - 加淡入过渡：
img { opacity: 0; transition: opacity 0.2s ease; } img[src] { opacity: 1; }，但前提是容器高度已锁定，否则 opacity 变化时高度还在跳，动画反而放大问题
最易被忽略的一点：服务端渲染（SSR）页面中，如果初始 HTML 已包含图片 src，又加了 loading="lazy"，旧版 Safari 可能直接跳过加载——结果是永远空白，居中彻底失效。此时应根据是否首屏动态决定是否加 lazy，而不是一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
