preload无法预加载css动画关键帧中的图片，因其background-image为运行时解析；应使用new image()主动加载并配合animation-play-state: paused控制播放时机。
preload 无法预加载 CSS 动画关键帧里的图片
直接在 <link rel="preload"> 里写关键帧中用到的图片路径，浏览器不会因此提前拉取——因为 CSS @keyframes 里的 background-image 是运行时解析的，preload 不识别这种间接引用。你看到图片首次动画时卡顿或闪白，往往就是这个原因。
真正起效的预加载方式：用 new Image() 主动触发加载
这是最可控、兼容性最好（IE9+）、且能精准匹配关键帧中实际使用的图片的方法。核心逻辑是：在动画开始前，手动创建 Image 实例并赋值 src，让浏览器走完整下载流程。
常见做法：
- 把关键帧涉及的所有图片 URL 提前收集进数组，循环创建
new Image() - 监听
img.onload和img.onerror，确认加载状态（但动画不需等全部完成才开始） - 避免重复加载：可用
document.querySelector('img[src="xxx"]')或 Map 缓存已加载的 URL - 不要在
DOMContentLoaded前执行——此时 document 可能未就绪，但可在async脚本或setTimeout(0)中安全调用
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const keyframeImages = [
'/img/frame1.png',
'/img/frame2.png',
'/img/frame3.png'
];
keyframeImages.forEach(src => {
const img = new Image();
img.src = src; // 触发加载
});
如果用 <link rel="preload">，必须匹配渲染路径
只有当图片 URL 在 HTML 或内联 CSS 中被**直接引用**（比如 <img src>、background: url(...) 写在 <style></style> 里），preload 才会生效。关键帧本身不触发 preload 关联。
所以可行但受限的做法是：
- 把关键帧第一帧图片用
<img hidden src="/img/frame1.png">或<div style="max-width:90%"></div>写在页面中，再配<link rel="preload" href="/img/frame1.png" as="image"> - 只对首帧或高频帧做 preload，其余仍靠
new Image()补全 - 注意
as="image"必须带上，否则可能被降级为fetch优先级，失去预加载意义
CSS animation-play-state: paused 配合 JS 控制时机
光预加载不够，还得控制动画启动时机，避免“图还没好，动画先跑”。推荐在所有关键帧图片的 onload 回调收齐后，再把动画从 paused 切成 running。
要点：
- 动画元素初始设
animation-play-state: paused，CSS 或内联样式均可 - 用
Promise.all(images.map(src => new Promise(...)))等待全部加载完成（可容忍部分失败） - 加载完成后改
style.animationPlayState = 'running'，动画立刻流畅开始 - 别依赖
img.complete判断——缓存命中时它可能是true，但异步加载场景下仍需统一走 onload 流程
preload 就完事；它需要你明确知道哪些图会被用、在哪个时机用，并用 JS 主动接管加载生命周期。最容易忽略的是：把预加载和动画启停解耦——很多人只做了前者，却没锁住动画播放时机，结果还是白屏一帧。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
