HTML5动画需手动管理外部资源加载，关键在监听load/error事件、处理跨域、用Promise.all等待资源就绪后再启动动画，避免黑屏卡顿。
HTML5动画中如何正确加载外部图片、音频、视频
HTML5动画本身不提供资源加载机制，所有外部资源都得靠原生Web API或第三方库手动管理。浏览器会自动发起HTTP请求，但加载失败时既不会报错也不会提示，容易导致动画黑屏、静音或卡顿。
关键判断点：资源是否在load事件触发后才被动画逻辑使用；是否处理了error事件；是否考虑跨域限制。
-
、标签可直接用src引用，但需监听onload和onerror - Canvas动画常用
Image对象预加载：const img = new Image(); img.onload = () => { /* 插入drawImage逻辑 */ }; img.onerror = () => { console.error('图片加载失败:', img.src); }; img.src = 'assets/char.png'; - 音频需注意
AudioContext的自动暂停策略：用户未与页面交互前，play()会抛出NotAllowedError - 视频若用于Canvas逐帧绘制，务必设置
video.setAttribute('crossOrigin', 'anonymous')，否则getImageData()会因污染canvas被拒绝
用fetch + Blob加载并复用外部资源（如JSON动画数据、SVG sprite）
当动画依赖外部配置（比如Lottie JSON、Spine二进制、自定义帧序列描述），fetch比XHR更简洁，且能配合Blob和URL.createObjectURL()复用资源，避免重复请求。
常见错误是把fetch().then(res => res.json())直接传给动画初始化函数——此时Promise未resolve，实际拿到的是Promise对象而非数据。
立即学习“前端免费学习笔记（深入）”；
- 加载JSON动画配置：
fetch('anim/config.json') .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }) .then(data => initAnimation(data)) .catch(err => console.error('动画配置加载失败:', err)); - 加载SVG sprite并注入DOM（供CSS动画或
引用）：fetch('icons/sprite.svg') .then(res => res.text()) .then(svgText => { const div = document.createElement('div'); div.innerHTML = svgText; div.style.display = 'none'; document.body.appendChild(div); }); - 加载二进制资源（如Spine atlas）时，必须用
res.arrayBuffer()，不能用text()，否则UTF-8解码会损坏二进制内容
资源路径写法对动画加载的影响
路径错误是“资源加载失败”类问题的最常见原因，尤其在构建工具（Vite/Webpack）或本地双击打开HTML文件时表现不一致。
相对路径以当前HTML文件为基准，不是JS文件位置；./和../容易因嵌套层级变化而失效；绝对路径/assets/在部署到子目录时可能404。
- 开发阶段建议统一用
public/目录（Vite）或static/（Webpack），资源路径写成/logo.png，由服务器映射到根目录 - 若动画JS模块通过
import方式引入资源（如import logo from './logo.png'），Webpack/Vite会返回一个哈希路径字符串（如/logo.abc123.png），此时必须用该返回值，不能硬编码原始路径 - 本地双击
file://协议打开时，fetch('./data.json')会失败（CORS策略），应改用XMLHttpRequest或直接把小资源内联为data URL
资源加载完成前动画如何避免白屏或错位
很多动画库（如GSAP、Three.js、PixiJS）默认立即启动，但资源还没就绪，结果第一帧就渲染失败。不能靠setTimeout猜时间，必须做显式等待。
核心思路：收集所有资源加载Promise，用Promise.all()统一守候，再启动主逻辑。
- 批量预加载图片：
const imageUrls = ['a.png', 'b.png', 'c.png']; const imagePromises = imageUrls.map(src => { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error(`加载失败: ${src}`)); img.src = src; }); }); Promise.all(imagePromises).then(images => { startAnimation(images); // 所有图片就绪后才开始 }); - Lottie Web推荐用
lottie.loadAnimation()的rendererSettings.preserveAspectRatio等参数控制占位行为，但前提是JSON已加载完毕 - Three.js中，
TextureLoader的load()方法本身返回Texture，但需确保材质（Material）在texture加载完成后才创建，否则贴图为空
资源加载不是“设好src就完事”，真正麻烦的是错误边界、路径环境差异、以及动画引擎和资源就绪状态之间的同步时机——这几个地方一漏，调试成本远高于写动画逻辑本身。
