Canvas 绘制精灵图时出现“仅刷新后才显示”问题，根本原因是图像加载时机错误：在 Image 对象未完成加载前就尝试读取尺寸或绘制，而缓存导致刷新后看似正常。本文提供基于 onload 事件的可靠预加载实现。
canvas 绘制精灵图时出现“仅刷新后才显示”问题，根本原因是图像加载时机错误：在 `image` 对象未完成加载前就尝试读取尺寸或绘制，而缓存导致刷新后看似正常。本文提供基于 `onload` 事件的可靠预加载实现。
在 Canvas 游戏开发中，精灵图（Spritesheet）的异步加载是高频痛点。你遇到的问题——首次访问白屏/无图、刷新后正常显示——本质是典型的「竞态条件」：Image.onload 回调未被正确绑定，且 src 赋值延迟到了 load() 方法中，导致图像实际加载被推迟到 onload 触发之后，形成逻辑死锁。
? 根本问题剖析
构造函数中立即执行 loadImages(this)
原代码 this.spritesheet.onload = loadImages(this) 是调用函数并赋值返回值（undefined），而非绑定回调函数。这导致 onload 从未被注册，loadImages 在构造时就被执行，此时 this.spritesheet.src 尚未设置，图像根本不会开始加载。src 设置过晚
Image 对象只有在 src 被赋值后才真正发起网络请求并触发加载流程。原设计将 this.spritesheet.src = this.filename 放在 load() 方法中，而 load() 又依赖 onload 触发——形成循环依赖，首次加载必然失败。
✅ 正确实现：立即绑定 + 立即加载
修正核心在于两点：使用箭头函数确保 this 上下文正确绑定 onload，并在构造函数内立即设置 src 启动加载：
class Spritesheet {
constructor(filename, rows, cols, x, y) {
this.filename = `./game/static/img/${filename}`;
this.rows = rows;
this.cols = cols;
this.x = x;
this.y = y;
this.spritesheet = new Image();
// ✅ 正确绑定：箭头函数延迟执行 loadImages，保留 this 指向当前实例
this.spritesheet.onload = () => loadImages(this);
// ✅ 立即启动加载！src 必须在此处赋值
this.spritesheet.src = this.filename;
}
load() {
// ✅ 此时 this.spritesheet 已加载完成，width/height 可安全读取
this.width = this.spritesheet.width / this.rows;
this.height = this.spritesheet.height / this.cols;
}
}⚠️ 关键注意事项
- numOfImages 必须是全局或模块级变量（非局部），确保所有 Spritesheet 实例共享同一计数器；
- 不要在 onload 回调中再次调用 load() —— load() 应仅在图像加载完成后由 onload 触发，用于计算子图尺寸；
- 若需支持加载失败处理，可添加 this.spritesheet.onerror = () => console.error('Failed to load sprite:', this.filename);；
- 所有 Spritesheet 实例必须在 window.onload 或 DOMContentLoaded 后创建，避免 DOM 未就绪导致的意外行为。
? 预加载流程总结
- preloadStatic() 创建 Spritesheet 实例 → 构造函数内立即设置 src 并绑定 onload；
- 浏览器并发加载所有图片，每张加载完成触发对应 onload；
- onload 中调用 loadImages(this) → 执行 spritesheet.load() 计算尺寸，并递减 numOfImages；
- 当 numOfImages === 0，调用 loadGame() 启动游戏主逻辑——此时所有精灵图已就绪，可安全绘制。
遵循此模式，即可彻底解决「仅刷新生效」问题，实现稳定、可预测的 Canvas 资源预加载。
