本文详解如何在基于 canvas 的视差滚动动画中，为指定图像（如 layer_9_1.png）设置独立延迟加载与显示，避免全局延迟影响其他图层，核心在于将 settimeout 与图层级 delay 配置解耦绑定。
本文详解如何在基于 canvas 的视差滚动动画中，为指定图像（如 layer_9_1.png）设置独立延迟加载与显示，避免全局延迟影响其他图层，核心在于将 settimeout 与图层级 delay 配置解耦绑定。
在实现 Canvas 视差效果时，常需控制不同图层的呈现节奏——例如让标题图层（layer_9_1.png）在页面加载完成后再优雅滑入，而背景、星点等底层元素立即渲染。原代码中虽为 title 图层配置了 delay: 2000，但该值未被实际使用，导致延迟逻辑缺失；若直接在 onload 外层加 setTimeout，又会错误地延后所有图层的加载触发时机，破坏并行加载优势。
✅ 正确解法是：将 setTimeout 应用于每张图层的 src 赋值与 onload 绑定环节，而非统一延迟整个循环。每个图层依据自身 layer.delay 值独立计时，确保仅目标图层延迟渲染，其余图层照常快速加载。
以下是关键代码重构（替换原 layers_list.forEach 加载逻辑）：
layers_list.forEach((layer, index) => {
// 每个图层按其 delay 属性独立延迟初始化
setTimeout(() => {
layer.image.onload = () => {
load_counter++;
if (load_counter >= layers_list.length) {
hideLoading();
requestAnimationFrame(drawCanvas);
}
};
layer.image.src = layer.src; // 此时才开始加载该图层
}, layer.delay || 0);
});
⚠️ 注意事项：
- layer.delay 单位为毫秒，0 表示立即加载（推荐显式写 0 提高可读性）；
- onload 回调仍需在 setTimeout 内注册，否则浏览器可能因图片已缓存而同步触发，绕过延迟；
- load_counter 是全局计数器，确保所有图层（含延迟图层）加载完毕后才隐藏 loading 屏并启动动画循环，避免画面残缺；
- 若需更精细控制（如延迟后淡入/位移动画），可在 layer.image.onload 内部追加 layer.isDelayed = true 标记，并在 drawCanvas() 中结合时间戳判断是否启用过渡逻辑。
? 进阶建议：对于 title 这类需动画入场的图层，可扩展 layer 配置项，例如增加 enterAnimation: 'slide-in-right' 和 duration: 600，再配合 requestAnimationFrame 实现帧级缓动，进一步提升交互质感。
此方案轻量、兼容性强，无需引入额外库，完美契合 Canvas 视差项目的性能与可控性需求。
