Change base texture of AnimatedSprite and upload it to gpu

[html5gamedev]

I am trying to replace a texture atlas of the animated sprite with another one, and play it.
On every click I first fetch the texture atlas image from server. Than I make periodic checks if there is any animation still running. Once there is no animation running, I replace animatedSprite.textures with the new on and upload that texture atlas to the gpu. After it is uploaded, I set canRunNext to true, signaling, that everything is uploaded and ready to go.

The issue is that app.renderer.plugins.prepare.upload uploads every second texture, for reasons unknown to me.

Now this could be hard to visualize so I created a dummy example. After each animation, I run a random next one. you MUST run this on a slow mobile device to see my issue. Well, just don't run it on latest iphones and androids and you should see the issue. The textures in use are just placeholders to convey message.

Link: http://forwardingsolutions.club/

Now, the first and second texture are uploaded as expected. if you click on square, the animation is triggered right away. But watch out, the 3. one is not, then the 4. is uploaded, then the 5. again, is not and so on. On every second click, my animation is not uploaded to gpu. I am not getting why is this happening. How would you fix this issue?

All the code is available at the website I posted. The meat are these two functions:

 

setupSpritesAnimation()
setupNextSpritesAnimation()

 

setupNextSpritesAnimation has a case statement (I trimmed that off to save some space), but inside the case I am basically just fetching a new image from server, and waiting for animation to be over. Once it is over, I create frames for each animation frame and upload them to the gpu.

function setupNextSpritesAnimation(){
            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', 'pathToSprote.png')
            .load(function (loader, resources){
                start = +new Date();
                var interval = setInterval(function(){
                    if (!isAnimating){
                        clearInterval(interval);
                        if (!firstRun){
                            nextSprite.textures = setupFrames(resources["nextSprite"].texture.baseTexture);
                            app.renderer.plugins.prepare.upload(nextSprite, function(){
                                console.log("updoaded now");
                                canRunNext = true;
                                isAnimating = false;
                                newLoader.reset();
                                //console.log("kill");
                                end = +new Date();
                                var diff = end - start;
                                console.log(diff);
                            });
                        }
                    }
                },50);
            });
}

I hope you can help me out with this stubborn issue. This question is a follow up question on 

with the live example included. The previous question got no response, probably because of lack of live example.
Best regards, Mitt

[tywang2006]

I dont know why you force to upload texture all the time, when some texture is not uploaded to gpu, and when you want to animate with those textures, they will be uploaded to gpu automatically.  the performance will be based on your size of texture, if it is huge, it will get issue with performance. or you can pre-upload them to gpu in the loading process.