pixi异步加载资源监听加载进度

pixi.js是一个非常流行的2D WebGL渲染库，它提供了一个简单的方式来处理图形的加载和渲染。在pixi.js中，异步加载资源时，你可以监听资源加载的进度。通常，我们使用`PIXI.Loader`来管理资源的加载，它提供了事件监听器来帮助我们获取加载过程中的信息。

以下是一个简单的例子，展示如何在pixi.js中使用`Loader`来异步加载资源，并监听加载进度：

// 创建一个loader实例
const loader = new PIXI.Loader();

// 注册资源加载的事件监听器
loader.onProgress.add((loader, resource) => {
    // resource是当前加载的资源对象
    console.log(`加载进度: ${loader.progress}%`);
});

loader.onLoad.add((loader, resource) => {
    // 资源加载完成后的操作
    console.log('资源加载完成');
});

loader.onError.add((error, loader, resource) => {
    // 资源加载出错时的操作
    console.error('加载错误:', error);
});

// 开始加载资源
loader.add(['image1.png', 'image2.png']).load((loader, resources) => {
    // 所有资源加载完成后会执行这里的回调函数
    console.log('所有资源加载完成');
});

// 示例中，我们监听了加载进度事件、加载完成事件和加载错误事件。
// 在加载进度事件中，可以获取到加载的进度信息，并在控制台打印出来。

通过这种方式，你可以知道资源加载的实时进度，并在资源完全加载后进行相应的操作。