Pixi.js最新版本 如何预载入多个图片并且显示载入进度，完成后回调方法

Pixi.js最新版本可以使用`PIXI.Loader`类来预载入多个图片，并且可以通过监听`onProgress`事件来显示载入进度，载入完成后可以使用回调方法来处理完成的事件。

以下是一个示例代码，它可以预加载两个图片，并在载入过程中显示进度条，载入完成后会调用回调方法：

// 创建一个加载器
const loader = new PIXI.Loader();

// 添加要预加载的图片
loader.add('image1', 'path/to/image1.png');
loader.add('image2', 'path/to/image2.png');

// 监听进度事件
loader.onProgress.add((loader, resource) => {
  console.log(`Progress: ${loader.progress}%`);
});

// 载入完成后的回调方法
loader.load((loader, resources) => {
  console.log('All resources loaded');

  // 在回调方法中创建精灵并添加到舞台
  const sprite1 = new PIXI.Sprite(resources['image1'].texture);
  const sprite2 = new PIXI.Sprite(resources['image2'].texture);
  app.stage.addChild(sprite1, sprite2);
});

在上面的代码中，`PIXI.Loader`类用来创建一个加载器，然后使用`add`方法添加要预加载的图片。`onProgress`事件会在每个资源载入时被触发，它的回调函数会接收两个参数：`loader`表示加载器对象，`resource`表示当前正在加载的资源对象。在回调函数中可以根据`loader.progress`属性显示进度条。

最后，在`load`方法中传入回调函数，这个函数会在所有资源都加载完成后被调用。在回调函数中可以根据`resources`参数获取每个资源的`texture`属性，然后创建精灵并添加到舞台中。