根本原因是图片加载前无盒模型，浏览器无法预留空间，导致加载后高度突变引发布局偏移；须用aspect-ratio或padding-bottom+position回退方案提前占位。
为什么只写 max-width: 100% 还是会抖动或上推文字
根本原因不是图片没加载完，而是它在加载前没有盒模型——浏览器不知道该给它留多大空间。一旦图片下来，高度突然出现，下方文字就被顶上去，这就是“布局偏移”（Layout Shift）。这不是动画问题，是空间缺失。
必须让容器在图片加载前就占据正确比例位置。现代方案首选 aspect-ratio: 16/9 + width: 100%，它能随父容器缩放且无需 JS。但 Safari 15.3 及更早版本不支持，得加回退：
-
height: 0+padding-bottom: 56.25%（对应 16:9），配合position: relative和子元素position: absolute - 别用
min-height或max-width替代——它们不参与初始布局计算，防不住塌陷 - 禁用内联
width/height属性，它们会覆盖 CSS 的aspect-ratio
用 CSS 背景做占位比调用 placeholder.com 更稳
第三方占位图服务（比如 https://via.placeholder.com）看似方便，但离线、DNS 故障或服务下线时，
纯 CSS 占位无网络请求，可控性强：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最简方案：
background: linear-gradient(#e0e0e0, #f5f5f5)，比纯色更能暗示“此处有图” - LQIP 模糊图可用 base64 嵌入：
background-image: url('data:image/jpeg;base64,/9j/4AA...')，控制在 2–3KB 内 - 慎用
background-position: center——若真实图比例与容器不一致，会裁切；推荐background-size: contain; background-repeat: no-repeat
load 和 error 事件必须成对监听，不能只靠 opacity 切换
仅靠 CSS 控制 opacity: 0 → 1 过渡，看起来平滑，但一旦图片加载失败，opacity: 1 不会触发，结果就是用户面对一个透明空框——看不见错误，也点不了重试。
JS 控制逻辑要覆盖两种终态：
const img = document.querySelector('img[data-src]');
img.addEventListener('load', () => img.classList.add('loaded'));
img.addEventListener('error', () => {
img.classList.add('loaded');
img.src = '/fallback.png';
});
- 用
classList切换状态，比直改style.opacity更利于维护和复用 - 如果用了
loading="lazy"，load仍会触发，但首次滚动前不会预加载——需跟设计确认是否接受首屏空白 - 别在
load回调里再setAttribute('src', ...)——若src已存在，会触发二次请求
srcset 和 sizes 不是可选项，是上线必配项
max-width: 100% 解决的是“怎么画出来”，srcset+sizes 才决定“加载哪一张”。漏掉它们，手机用户很可能下载一张 3MB 的桌面图，等三秒才出图，而你还在查 CSS 是否写对。
-
srcset列的是图片源的固有宽度（单位w），如"photo-480.jpg 480w, photo-1200.jpg 1200w" -
sizes必须和 CSS 中该图实际占位逻辑一致，例如小屏占满视口、中屏占一半：sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错（比如写成50%）会导致选图完全失准 - 开发时用 Chrome DevTools → Network → Filter “Large resources” 验证是否真加载了合适尺寸的图
关键点常被忽略：真正难的不是写对某一行 CSS，而是分清当前问题到底是「布局抖动」「图片溢出」「加载太慢」还是「高清屏模糊」——每个问题背后对应的技术路径完全不同，混用反而掩盖根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
