Interactive images slider (with images download)

[MasterNap]

I try make images slider with buttons "left", "right".

I have 3 image objects [left,mid,right]
and 3 scenes: Stand (no animation), Left (move left), Right (move right)

// for each image object
...
var imgMid = controller.getElementIdById('imgMidID')
var qsMid =  document.querySelector('#' + imgMid+' img');
qsMid.src = midImgSrc;
...
 pictLoaded();

var pictLoaded= function() {
...
        if (animType == 1)
        {
            controller.goToTimelineByName('left')
        } else if (animType == 2)
        {
            controller.goToTimelineByName('right')
        }
...
}

its work, but images have no time to be displayed (blink)

then i use "onload"

 qsMid.onload = function(){
        pictLoaded();
    }
qsMid.src = midImgSrc;

its work almost perfect on Google Chrome and IE, but dont work on FF (FF does not support .onload with sencha object if this image in browser cash)

Then i try use same hack:

 var imgMid = controller.getElementIdById('imgMidID')
 var qsMid =  document.querySelector('#' + imgMid+' img');
 var midImgHack  = new Image();
 midImgHack.onload = function(){
        pictLoaded();
 }
  midImgHack.src = midImgSrc;
  qsMid.src = midImgSrc;

its work on all brousers, but i think Sencha have some other solutions ?
For example in Adobe flash i can load all images in the same obects and just make ".visible=false", or ".visible=true" without reloading.

[miro.bojic]

Hi,

I suggest you should look into using timelines rather than using separate scenes. This way you are animating same dom objects rather than having to load different ones due to scene switching. Take a look at this project, as it deals exactly with that (slide in/slide out): http://animator.sencha.com/demo/Buildings/

[miro.bojic]

Moved the thread to Help&Discussion, as it's not a feature request.