0

I am using the PIXI.Loader to load images for sprites. Therefore I am tracking the loading progress to show and hide a corresponding loader component. When the progress is at 100 the loader component is set to invisible.

So far this was working totally fine, but suddenly the loader stops at 99.99999999999984%. The images seem to be loaded all correctly, but the loader components obviously won't hide.

I am using React, the part where the progress is looks like the following:

if (loader && !firstRender.current) {
    firstRender.current = true
    loader.onProgress.add(l => {
        setProgress(l.progress)
    })
}

useEffect(() => {
    if (progress === 100) setVisibility("none")
}, [progress])

return (
    <div className="bg" style={{display: visibility}}>
        <CircularProgressWithLabel color="primary" value={progress} />
    </div>
)

Does anybody have an idea why the progress doesn't reach 100%?

Kind regards Philipp

philman
  • 129
  • 2
  • 10
  • 1
    This seems to be float number problem which exists in javascript and also in other languages. (example https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript ) . Can you paste a snippet showing how you use said "loader" ? – domis86 Jan 31 '21 at 08:22
  • @domis86 Thanks for the tip already. I've added a snipped. – philman Jan 31 '21 at 10:33
  • Maybe I will just use ```.toFixed(10)``` as a workaround. – philman Jan 31 '21 at 12:48
  • Yes, such rounding should solve this problem. – domis86 Jan 31 '21 at 22:17

1 Answers1

0

add

 loader.onComplete.add(() => {
  this.loadingComplete();
});

and then do your processing by defining

  loadingComplete(){//your stuff}

method whith whatever you want to do after loading is complete. worked for me perfectly

Prachi Joshi
  • 355
  • 1
  • 7
  • 20