图片加载延迟导致流式布局塌陷的根本原因是浏览器首帧渲染时未知图片高度，必须用aspect-ratio、宽高属性或占位图锁定容器高度，配合flex-shrink:0和opacity过渡实现稳定渲染。
图片加载延迟导致流式布局塌陷，根本不是 JS 没监听好 load 事件，而是浏览器在首帧渲染时压根不知道图片该占多高——height 为 0，盒子塌了，文字上推，后续重排不可避免。
必须用 aspect-ratio 或 width/height 锁定容器高度
流式布局（如 flex/grid/响应式列表）里，仅靠 max-width: 100% 或 width: 100% 不足以阻止塌陷，因为它们不声明高度。浏览器无法预留空间，就只能等图片加载完再撑开，必然跳动。
- 现代写法：给
<img>加 CSSaspect-ratio: 4 / 3+width: 100%，兼容 Chrome 88+、Firefox 89+、Safari 15.4+ - 兼容老 Safari（≤15.3）：用
padding-bottom: 56.25%+position: relative+ 绝对定位子<img> - 服务端能提供宽高时，直接写 HTML 属性：
<img width="800" height="600">，首帧即知尺寸，兼容性最好 - 禁用
min-height或max-height替代——它们不参与初始布局计算，无法防塌陷
loading="lazy" 不能当占位方案，src 必须有有效值
原生懒加载只控制请求时机，不提供占位能力。如果 src 为空、是 data-src 或缺失，图片区域直接塌陷，loading="lazy" 再早触发也救不了布局。
- 最小可用占位图用 1×1 透明 GIF：
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - 或 SVG 占位：
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" - 切勿只设
loading="lazy"却留空src；也不要用data-src替代src—— 浏览器不认它作占位依据 - 若用
<picture>，srcset和sizes也得同步存到data-srcset/data-sizes，加载时一并赋值，否则高 DPR 设备会拉错尺寸
瀑布流和弹性布局里，<img> 要套 wrapper 防收缩
在 flex 或 grid 容器中，<img> 默认 flex-shrink: 1，空间不足时会被压缩；加载后尺寸恢复，“弹回”效果看起来就像跳位。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
style="flex-shrink: 0"，或统一类：.img-fixed { flex-shrink: 0; } - 更稳妥做法：用
<div class="img-wrapper">包一层，img-wrapper设aspect-ratio和width: 100%，内部<img>设width: 100%; height: 100%; object-fit: cover; - 避免让
<img>直接当 grid item 参与轨道分配——它尺寸不稳定，容易拖垮整列高度计算 - 瀑布流 JS 库（如 masonry）依赖
offsetHeight计算列高，若图片没加载完，offsetHeight === 0，结果就是卡片错位或大片空白
视觉过渡要配合尺寸锁定，否则越动越乱
加 opacity 动画本身不能防跳动，反而可能放大问题——如果容器高度还在变，opacity 切换时用户会看到“半透明+突然下移”的双重抖动。
- 先确保容器高度已由
aspect-ratio或宽高属性锁定 - CSS 设初始状态：
img { opacity: 0; transition: opacity 0.3s ease; } - 加载完成立即设
img.style.opacity = 1，或用属性选择器：img[src] { opacity: 1; } - 加
will-change: opacity防动画卡顿，但别滥用——只对真实需要淡入的图片加 - 注意：仅靠
opacity无法兜底加载失败，必须配onerror或 CSS:has()处理 fallback
最容易被忽略的是：服务端返回的图片宽高属性必须和实际比例一致，否则即使写了 width="800" height="600"，浏览器也会按实际像素拉伸，JS 拿到的 offsetHeight 和预期不符，所有基于尺寸的逻辑全崩。
