Stuttering animation when spanning multiple sprite sheets in easeljs

问题

Using EaselJS, I have an animation that the user may scroll through with a custom slider. It uses 10 sprite sheets to display 152 frames of size 1924 x 1708.

//images were declared above in style | var chromophoreAni0 = new 
Image(); | 
var data = { 
            images: [chromophoreAniImage0, chromophoreAniImage1, 
chromophoreAniImage2, chromophoreAniImage3, chromophoreAniImage4, 
                    chromophoreAniImage5, chromophoreAniImage6, 
chromophoreAniImage7, chromophoreAniImage8, chromophoreAniImage9], 
            frames: {count: 152, width: 356, height: 316}, 
            animations: {all: [0, 151]} 
        }; 
chromophoreSpriteSheet = new SpriteSheet(data); 
chromophoreAni = new BitmapAnimation(chromophoreSpriteSheet); 
chromophoreAni.gotoAndStop(1); 
stage.addChild(chromophoreAni); 
stage.update(); 
//whenever the slider changes position | 
gotoAndStop(currentSliderFrame) | 

The animation works but there is a very noticeable hiccup whenever the animation is hopping between sprite sheets. Since the user can go from one end of the slider to the other as fast as they want, it may be that the animation is being played to fast for the images to keep up. However, the animation was only acceptably smooth when scrolling at a snail's pace. It also occurred to me that the sprite sheet size of 1424 x 1708 might be too large to load at such a high speed. So I decreased the image sizes to as low as 1424 x 632 (<250kb) and while there was improvement, the lag was still there. If there is a more optimal method to do this, I haven't seen it. Any input into this scenario would be wonderful. The ultimate goal for this is to run smoothly on the ipad, so any image size larger than 2048 x 2048 won't fly.

Is it possible that I could get greater performance using css sprites or my own custom methods in javascript?

来源：https://stackoverflow.com/questions/9403883/stuttering-animation-when-spanning-multiple-sprite-sheets-in-easeljs