prepare previously invisible sprite animation to run without lag

[html5gamedev]

I am running a current animation on click. At the time of click, I start loading the next animation. On next click event, I fire the next animation, and hide current one with the code below. It is essential that the animation fires without delay.

 

    $("#canvas").on("click touch touchstart",function(){
        if (firstRun){
            current.gotoAndPlay(0); //current is an animated sprite
            loadNext();
            console.log("first run");
            firstRun=false;

        }else{
            if (canRunNext){
                next.visible=true;
                current.visible=false;
                next.gotoAndPlay(0);
                console.log("can run next");
            }else{
                console.log("cannot run next");
            }
        }

    });

 

 

I noticed, that pixi doesn't prepare invisible object. There is a freeze between next.visible = true and next.gotoAndPlay(); How can I "prepare" the animation, so that it gets loaded and ready to go, immediately after goToAndPlay() is issued, but is invisible before that?

 

this is the loadNext function. I stripped away some other functions that I think don't matter. I will gladly add them if needed.

 

    var firstRun = true;
    var infiniteLoader = PIXI.loader;
    

function loadNext(){
        if (firstRun){
            infiniteLoader.add('jimages/3.json');
            infiniteLoader.load(function(loader, resources) {
                next = new PIXI.extras.AnimatedSprite(setupFrames("3_"));
                next.visible=true;
                next.animationSpeed = 0.5;
                next.loop= false;
                next.x = app.renderer.width / 2;
                next.y = app.renderer.height / 2;
                next.anchor.set(0.5);
                app.stage.addChild(next);
                canRunNext=true; 
                console.log("next loaded");
            }); 

        }else{
            infiniteLoader.add('jimages/3.json');
            infiniteLoader.load(function(loader, resources) {
                next = new PIXI.extras.AnimatedSprite(setupFrames("3_"));
                canRunNext=true; 
                console.log("next loaded");
            });  
        }
    }