本文详解如何通过预加载全部帧图像并避免动态切换 img.src 引发的竞态条件，彻底解决透明 png 在 canvas 中逐帧播放时出现的瞬时空白、闪烁和卡顿问题。
在基于滚动触发的 Canvas 动画中（如产品展示页的帧动画），若采用“按需设置 img.src + drawImage”的旧模式，极易因图像未就绪导致渲染空白——这是因为 img.onload 是异步事件，而 drawImage 在图像尚未加载完成时会静默失败（不报错，但不绘制），造成几毫秒的全透明“闪帧”，尤其在 Chrome 等浏览器中表现明显。
根本原因并非 clearRect 或 drawImage 性能瓶颈，而是资源加载与渲染逻辑的竞态：每次滚动都重新赋值 img.src，但未等待其加载完成就立即绘制，导致大量无效绘制调用。
✅ 正确解法是：预加载所有帧为已就绪的 Image 实例，并缓存于数组中，确保每一帧调用 drawImage 时，图像资源 100% 可用。
以下是优化后的完整实现：
const canvas = document.getElementById("prodPicAnimation");
const ctx = canvas.getContext("2d");
const frameCount = 120;
// 生成全部帧 URL（注意：索引从 1 开始，补零至 3 位）
const imageUrls = Array.from({ length: frameCount }, (_, i) =>
`https://www.dr-adler.com/content/produkte/Sheabutter/renderAnimation/${(i + 1).toString().padStart(3, '0')}.png`
);
// 异步预加载单张图，返回已加载完成的 Image 对象
const preloadImage = (src) => {
return new Promise(resolve => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => resolve(null); // 防止某帧失败阻塞整体
img.src = src;
});
};
// 并行预加载全部帧，返回 Image 实例数组
const preloadAllFrames = () => Promise.all(imageUrls.map(preloadImage));
// 初始化动画系统
const init = async () => {
console.log('开始预加载...');
const images = await preloadAllFrames();
// 过滤掉加载失败的帧（可选：替换为占位图或跳过）
const validImages = images.filter(img => img !== null);
if (validImages.length < frameCount) {
console.warn(`警告：仅成功加载 ${validImages.length}/${frameCount} 帧`);
}
// 设置画布尺寸（建议在 CSS 中固定，此处确保像素精准）
canvas.width = 750;
canvas.height = 750;
// 首帧立即渲染
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(validImages[0], 0, 0);
// 绑定滚动监听：根据滚动位置计算目标帧索引，并 requestAnimationFrame 安全更新
window.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop;
const maxScrollTop = 750;
const scrollFraction = Math.max(0, Math.min(1, scrollTop / maxScrollTop));
const frameIndex = Math.min(validImages.length - 1, Math.floor(scrollFraction * validImages.length));
requestAnimationFrame(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(validImages[frameIndex], 0, 0);
});
});
console.log('动画初始化完成，共加载', validImages.length, '帧');
};
// 启动
init();? 关键优化点说明：
- ✅ 无竞态：所有 Image 对象在动画启动前已完成加载，drawImage 调用即刻生效；
- ✅ 零延迟切换：滚动时仅做数组索引访问与绘制，无网络 I/O 或解码开销；
- ✅ 内存友好：现代浏览器对已解码图像复用高效，120 张 750×750 PNG（平均 ~100KB）约占用 10–15MB 内存，完全可控；
- ✅ 健壮性增强：加入 onerror 处理，避免单帧失败导致白屏；
- ✅ 渲染安全：严格使用 requestAnimationFrame 包裹绘制，确保与屏幕刷新率同步。
? 进阶建议：
- 若首屏加载时间敏感，可添加加载状态 UI（如 <div id="loading">加载中...</div>），并在 init() 结束后移除；
- 对超大帧数（>200）或高分辨率场景，可考虑 Web Worker 预解码 + createImageBitmap 进一步提升首帧绘制速度；
- 避免在滚动回调中重复创建 Image 或触发 GC，本方案全程复用预加载对象，杜绝内存泄漏风险。
遵循此模式，即可实现丝滑、稳定、无闪烁的 Canvas 帧动画体验，完美适配产品页、交互式广告等高性能视觉场景。
