decode() 是 htmlimageelement 的异步方法，必须在 javascript 中调用并处理 promise，不能直接写在 html 标签里；正确做法是监听 load 事件后调用 decode()，仅在其 resolve 后才显示图片。
decode() 是 HTMLImageElement 的原生方法，但它**不能直接在 HTML 中调用**——你必须通过 JavaScript 操作 DOM 元素才能使用。所谓“在 HTML 中通过 decode()”本身是个常见误解，会导致图片加载逻辑失效、甚至报错。
为什么直接写在 HTML 里没用？
decode() 是一个返回 Promise 的异步方法，必须显式调用并 await 或 .then() 处理；HTML 标签（如 <img>）不支持嵌入 JS 表达式或 Promise 调用。试图写成 <img src="x.jpg" onload="this.decode()"> 会静默失败（decode() 返回的 Promise 被丢弃，且未处理 rejection）。
正确调用 decode() 的三步实操
必须在 JS 中获取 <img> 元素，等待其 load 事件触发后调用 decode()，再控制显示时机：
- 确保图片已设置
src（但尚未插入文档或设为可见），避免提前渲染 - 监听
load事件，再调用img.decode()，并 必须处理 Promise rejection（例如网络中断、解码失败时） - 仅当
decode()resolve 后才将图片添加到 DOM 或移除 loading 状态（如取消opacity: 0或visibility: hidden）
示例：
const img = new Image();
img.src = 'photo.jpg';
img.onload = () => {
img.decode()
.then(() => {
document.body.appendChild(img); // 或切换 class 显示
})
.catch(err => {
console.warn('图片解码失败，降级显示：', err);
document.body.appendChild(img);
});
};
容易踩的坑：不是所有浏览器都默认支持，且有兼容性细节
decode() 在 Chrome 54+、Firefox 69+、Safari 14.1+ 支持，但 Safari 对 WebP 和某些 HDR 图片的 decode() 可能抛错；另外：
- 调用
decode()前图片必须已完成下载（即img.complete === true），否则会 reject - 重复调用
decode()是安全的，但无必要；同一张图多次 decode 不会加速 - 对 base64 图片或
data:URL，decode()仍有效，但部分旧版 Safari 会拒绝解析 - 服务端开启
Content-Encoding: gzip不影响decode()，但若图片本身损坏（如截断的 JPEG），decode()会明确 reject，而原生加载可能只显示空白或乱码
替代方案：什么时候其实不需要 decode()？
如果只是想防闪烁，更轻量的做法可能是：
- 用 CSS 设置
img { opacity: 0; transition: opacity .2s; }，等load后加 class 触发淡入（不依赖解码完成） - 对懒加载场景，用
loading="lazy"+IntersectionObserver配合decode()，但需注意：进入视口时图片可能还未 load 完，要等load再 decode -
decode()主要价值在「确保 GPU 解码帧就绪」，对普通内容图，用户感知差异极小；真正需要它的典型场景是：画布合成、滚动中密集图片切换、PWA 离线缓存图册
关键点在于：解码完成 ≠ 加载完成，而浏览器渲染管线会在解码未就绪时先占位、后重绘——这就是闪烁根源。所以别跳过 decode() 的 Promise 链，也别指望 HTML 语法能绕过 JS 执行模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
