Pixi.js: How to stop the loader?

Created on 24 Apr 2018  路  4Comments  路  Source: pixijs/pixi.js

  • pixi.js version: _4.7.0_
  • Browser: _Google Chrome 66_
  • Device: _macOS High Sierra_

Hello everyone!

I've the following setup: my React component mounts and the PixiJS application gets initialised. Then the following code gets executed:

this.loader.load((loader, resources) => {
  this.app.stage.addChild(this.getImage({ image: item, texture: resources[item.identifier].texture }));
  this.sortStage();
});

However, now a problem occurs. If a user navigates away from the page while the loader is still running the following error occurs: Canvas.js:332 Uncaught TypeError: Cannot read property 'addChild' of null

I already implemented the following code to try to solve this issue:

componentWillUnmount() {
  this.componentIsMounted = false;
  this.app.destroy(true);
  this.loader.destroy();
}

But the error still occurs. I can use the this.componentIsMounted inside of the loader to check if the component is still mounted before adding things to the stage (this solution works) but I'd rather just stop the loader. So my question is: how do I stop the loader from loading?

Thanks in advance!

Most helpful comment

You can call .reset() to abort a load and clear resources, however I bet this isn't the root cause of your issue. I bet it is just not handling errored (or cancelled) resources correctly.

All 4 comments

You can call .reset() to abort a load and clear resources, however I bet this isn't the root cause of your issue. I bet it is just not handling errored (or cancelled) resources correctly.

@englercj thanks for your response!

I'm indeed not handling failed (or cancelled) resources correctly since I'm not handling them whatsoever.

However, I don't get how my problem has got anything to do with failed/cancelled resources? The problem is that the React component is already unmounted while the loader is still running. So the loader tries to add children to the stage but the stage is already removed from the DOM.

I'll implement your solution by calling .reset() in componentWillUnmount and will check if it works.

Also I think it's kinda weird that .reset() isn't called by .destroy().

Calling .reset() inside of componentWillUnmount solved my issue.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

softshape picture softshape  路  3Comments

MRVDH picture MRVDH  路  3Comments

readygosports picture readygosports  路  3Comments

neciszhang picture neciszhang  路  3Comments

Makio64 picture Makio64  路  3Comments