How to run sequencing images in scrollmagic js without new HTTP request

I am just inspired from an example running on scrollmagic.io - http://scrollmagic.io/examples/expert/image_sequence.html.

Its working fine but the issue is each time it sends HTTP request which takes time if we are using heavy 200 KB images.

Can anyone please suggest the best the achieve this sequence in better way? Or we can say without sending any HTTP request.

here is the JS code available on the page:

`var images = [ "../../img/example_imagesequence_01.png", "../../img/example_imagesequence_02.png", "../../img/example_imagesequence_03.png", "../../img/example_imagesequence_04.png", "../../img/example_imagesequence_05.png", "../../img/example_imagesequence_06.png", "../../img/example_imagesequence_07.png" ];

                    // TweenMax can tween any property of any object. We use this object to cycle through the array
                    var obj = {curImg: 0};

                    // create tween
                    var tween = TweenMax.to(obj, 0.5,
                        {
                            curImg: images.length - 1,  // animate propery curImg to number of images
                            roundProps: "curImg",               // only integers so it can be used as an array index
                            repeat: 3,                                  // repeat 3 times
                            immediateRender: true,          // load first image automatically
                            ease: Linear.easeNone,          // show every image the same ammount of time
                            onUpdate: function () {
                              $("#myimg").attr("src", images[obj.curImg]); // set the image source
                            }
                        }
                    );

                    // init controller
                    var controller = new ScrollMagic.Controller();

                    // build scene
                    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
                                    .setTween(tween)
                                    .addIndicators() // add indicators (requires plugin)
                                    .addTo(controller);`

I wonder if we can just put all the images in HTML and then hide and show the images to keep the sequencing alive. Just a thought.

Any help much appreciated.

janpaepke / ScrollMagic

How to run sequencing images in scrollmagic js without new HTTP request #537