Waiting until all resources are loaded.

[TomCruise]

Hey there!

I have two modules - "controller.js" and "loader.js".

In the controller module, I call two methods - `Loader.loadResources()` and right after that, `Sprites.createSprites()`

(which uses the `loader.resources` to create sprites from textures).

As you can probably tell, the latter function throws an error since the loader hasn't completed loading all the resources yet.

I don't want to pass `Sprites.createSprites()` as a callback to the `loader.load()` method since I want the loader module to do only one thing - load resources.

Is there a way to wait until the loader completes loading all resources?

Thanks!

[jonforum]

sure , you can attach events to loaders

loader.onComplete.add((loader, res) => {
	console.log('res: ', res);
	resolve(); // or start your app
	});

 

https://pixijs.download/dev/docs/PIXI.Loader.html

Edited August 22, 2020 by jonforum

[ivan.popelyshev]

if you want LOADER to not know anything about SPRITES and SPRITES dont know about LOADER, you can make app-level event system and spawn an event "onload" which will be caught by sprites

[kuvkir]

Hey,

 

I've worked through the similar problem recently and ended up using the Promise API as follows:

    async loadResource(key: string, path: string): Promise<PIXI.LoaderResource> {
        return new Promise<PIXI.LoaderResource>((resolve) => {
            PIXI.Loader.shared.add(key, path).load(() => {
                resolve(PIXI.Loader.shared.resources[key]);
            });
        });
    }

so in your initialization code you can do something like this:

await loaderResource("sprite", "path/to/image.png");
// at this point the resource has been loaded so you can proceed
Sprites.createSprite(...)

Hope that helps