应优先用decode() API确保图片解码完成再淡入：先设opacity:0+transition和aspect-ratio占位，再设src，decode()成功后加loaded类触发opacity:1；不支持时降级监听load事件并强制reflow。
图片加载完成前如何避免闪跳
直接给 img 元素加 opacity: 0; transition: opacity 0.3s; 并不可靠——浏览器可能在图片解码完成、尺寸确定前就触发渲染，导致淡入从“无尺寸占位”突然跳到“有尺寸+半透明”，视觉上仍是闪动。
关键不是等 load 事件，而是等图片真正“就绪并可绘制”：即宽高已知、内容已解码。现代方案应优先用 decode() API 配合状态控制。
- 不要依赖
onload后立刻设opacity: 1，因为此时 DOM 已渲染，transition 可能不触发（浏览器认为初始状态就是 0→1 的突变） - 务必先设
opacity: 0+transition，再设置src，否则 transition 无起点 - 服务端返回的图片若未带宽高属性（
width/height），需 JS 主动读取或预设 aspect-ratio 占位，否则 layout shift 仍会发生
用 CSS transition + opacity 的最小可靠写法
核心是分离“入场准备”和“入场动画”两个阶段：先隐藏、占位、挂 transition；再触发加载；最后在真正可用时切换 class。
.img-fade {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* 避免 layout shift，强制保留宽高或 aspect-ratio */
aspect-ratio: 16 / 9;
}
.img-fade.loaded {
opacity: 1;
}JS 部分必须调用 decode() 并等待 Promise resolve，再添加 loaded 类：
const img = document.querySelector('img');
img.classList.add('img-fade');
img.src = '/path/to/image.jpg';
<p>img.decode()
.then(() => img.classList.add('loaded'))
.catch(() => img.classList.add('loaded')); // 解码失败也视为“可显示”
style.opacity 直接赋值为什么常失效
很多人写 img.style.opacity = '0'; img.src = url; img.style.opacity = '1';，这完全无效——两次赋值发生在同一渲染帧，浏览器会合并为最终值 1，transition 根本没机会运行。
-
style.opacity是内联样式，优先级高，但无法触发 transition，除非中间有 layout/reflow 或 setTimeout 分帧 - 强行用
setTimeout(() => img.style.opacity = '1', 10)不稳定，依赖渲染调度，且无法保证图片已解码 - 更糟的是，如果图片跨域且未配 CORS，
decode()会 reject，此时应降级为仅靠load事件，但要手动触发 reflow：img.offsetHeight; img.classList.add('loaded');
兼容性与降级要点
decode() 在 Safari 16.4+ 和 Chrome 73+ 支持良好，但旧版 iOS Safari 仍需 fallback。不能只靠 CSS 过渡，得结合 JS 状态管理。
- 检测支持：
if ('decode' in HTMLImageElement.prototype)，否则监听load事件 - 对不支持
aspect-ratio的老浏览器（如 IE、旧 Android），用padding-top: 56.25%+position: absolute模拟宽高比占位 - 慎用
will-change: opacity，它可能引发额外合成层，对长列表图片造成内存压力
最易被忽略的是：transition 的 timing function 如果用 ease 或 linear，淡入会显得生硬；推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94) 这类缓入缓出曲线，更接近自然渐显节奏。
