Pixi.js最新版本没有PIXI.Loader类的情况下 如何预载入多个图片并且显示载入进度,完成后回调方法
时间: 2024-02-24 09:55:40 浏览: 221
多种js图片预加载实现方式分享
如果使用的是Pixi.js最新版本,没有`PIXI.Loader`类的情况下,可以使用`PIXI.Loader.shared`来预加载多个图片,并且可以通过监听`onProgress`事件来显示载入进度,载入完成后可以使用回调方法来处理完成的事件。
以下是一个示例代码,它可以预加载两个图片,并在载入过程中显示进度条,载入完成后会调用回调方法:
```javascript
// 创建一个加载器
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`属性,然后创建精灵并添加到舞台中。
阅读全文