PixiJS v8中Assets.load回调模式失效问题求助

问题核心 #

PixiJS v8 对资源加载API做了重构，原示例的回调写法会触发「Asset id face.png was not found in the Cache」警告，本质是回调执行时机早于资源完成缓存写入，而Promise的then方法是在资源完全加载并缓存后才执行，因此不会出现问题。

代码对比与原因分析 #

报错的回调写法（原示例） #

// 错误写法：此处回调是加载进度回调，非完成回调
Assets.load('face.png', () => {
  const texture = Assets.cache.get('face.png'); // 资源尚未写入缓存，触发警告
  const sprite = new Sprite(texture);
  app.stage.addChild(sprite);
});

PixiJS v8 中Assets.load的第二个参数是加载进度回调，会在资源加载过程中多次触发，此时资源还未完成缓存写入，自然无法从缓存中获取到目标资源。

正常的Promise写法 #

// 正确写法：then在资源加载+缓存完成后执行
Assets.load('face.png').then((texture) => {
  const sprite = new Sprite(texture);
  app.stage.addChild(sprite);
});

Assets.load返回的Promise会在资源完全加载并缓存成功后resolve，直接返回加载好的texture，无需再手动从缓存中获取，逻辑更可靠。

推荐的async/await写法 #

如果你刚接触异步语法，async/await是更简洁直观的替代方案：

async function loadSprite() {
  const texture = await Assets.load('face.png');
  const sprite = new Sprite(texture);
  app.stage.addChild(sprite);
}
loadSprite();

版本适配说明 #

PixiJS v7及以前的Assets.load回调是加载完成回调，但v8重构后拆分了进度回调与完成回调，原示例写法仅适配旧版本，不适配v8的新API逻辑。

内容的提问来源于stack exchange，提问作者ENIAC