Pixi.js最新版本没有已经移除了PIXI.Loader类的情况下 如何预载入多个图片并且显示载入进度,完成后回调方法,请注意已经没有PIXI.Loader类了,所以不要使用PIXI.Loader类
时间: 2024-02-24 10:55:44 浏览: 68
如果使用的是Pixi.js最新版本,已经移除了`PIXI.Loader`类,可以使用`PIXI.Loader.shared`来预加载多个图片,并且可以通过监听`onProgress`事件来显示载入进度,载入完成后可以使用回调方法来处理完成的事件。
但是,需要注意的是,如果要使用`PIXI.Loader.shared`来加载资源,需要先将要加载的资源添加到队列中,然后调用`PIXI.Loader.shared.load()`方法来开始加载,否则`onProgress`事件将不会被触发。
以下是一个示例代码,它可以预加载两个图片,并在载入过程中显示进度条,载入完成后会调用回调方法:
```javascript
// 添加要预加载的图片
PIXI.Loader.shared.add('image1', 'path/to/image1.png');
PIXI.Loader.shared.add('image2', 'path/to/image2.png');
// 监听进度事件
PIXI.Loader.shared.onProgress.add((loader, resource) => {
console.log(`Progress: ${loader.progress}%`);
});
// 载入完成后的回调方法
PIXI.Loader.shared.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);
});
```
在上面的代码中,先使用`add`方法将要预加载的图片添加到队列中,然后使用`onProgress`事件来监听进度变化。最后,在`load`方法中传入回调函数,这个函数会在所有资源都加载完成后被调用。在回调函数中可以根据`resources`参数获取每个资源的`texture`属性,然后创建精灵并添加到舞台中。
需要注意的是,在使用`PIXI.Loader.shared`加载资源时,需要先将要加载的资源添加到队列中,然后调用`load`方法开始加载。否则`onProgress`事件将不会被触发。
阅读全文