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

要预加载多个图片并且显示载入进度，可以使用Pixi.js的Loader类。可以使用add()方法向加载器中添加多个资源，然后使用load()方法开始加载。在加载过程中，可以使用onProgress()方法来更新载入进度。

以下是一个示例代码：

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

// 添加多个资源
loader.add('image1', 'path/to/image1.png');
loader.add('image2', 'path/to/image2.png');
loader.add('image3', 'path/to/image3.png');

// 更新载入进度
loader.onProgress.add((loader) => {
    console.log(`Loading ${loader.progress}%`);
});

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

在上面的示例中，我们创建了一个加载器，并向其中添加了三个图片资源。然后，我们使用onProgress()方法来更新载入进度。最后，在所有资源加载完成后，我们使用load()方法来开始加载，并在回调方法中执行加载完成后的操作。

相关问题

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`属性，然后创建精灵并添加到舞台中。

Pixi.js最新版本没有PIXI.Loader类的情况下 如何预载入多个图片并且显示载入进度，完成后回调方法

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

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

// 创建一个加载器
const loader = PIXI.Loader.shared;

// 添加要预加载的图片
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.shared`来获取一个共享的加载器，然后使用`add`方法添加要预加载的图片。`onProgress`事件会在每个资源载入时被触发，它的回调函数会接收两个参数：`loader`表示加载器对象，`resource`表示当前正在加载的资源对象。在回调函数中可以根据`loader.progress`属性显示进度条。

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