1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    9
    Vote Rating
    0
    jscodr is on a distinguished road

      0  

    Default Smooth carousel transitions possible when having more than a few elements?

    Smooth carousel transitions possible when having more than a few elements?


    Hello,

    I'm trying to make a magazine style application using Sencha Touch 2 running on top of PhoneGap. Essentially it's just a carousel component loaded with a bunch of images (in the neighbourhood of 3 - 20), some text and a table. When switching to a new carousel item I dynamically load the next item in line and remove the old items, so at any point there is only 3 carousel items loaded at the same time. This kind of works but page transitions to items with a large number of elements and horizontal scrolling in those pages are anything but smooth. I'm now starting to doubt that it's even possible to do what I'm trying to do. Does anyone have an example of a carousel hosting relatively many elements and doing smooth transitions and horizontal scrolling? Any tips on how I can improve the performance of the app?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You do know that the ST2 carousel does this for you right? It will only render 3 items at a time so you should have to add and remove items. If you look at the DOM and find where the items are and start switching between your items you will see that only 3 of them are rendered at a given time.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    9
    Vote Rating
    0
    jscodr is on a distinguished road

      0  

    Default


    If I load all items into the carousel at startup the app will be unresponsive for a long time (at least 30 seconds). When I only load three items the app is usable within a couple of seconds. But it's not really an issue since I've implemented the dynamic loading. What's more problematic is that transition and scrolling smoothness becomes heavily worsened when more than a few elements are present in the pages.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How large are your images? Are they optimized for mobile devices?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    -2
    etechnovate has a little shameless behaviour in the past

      0  

    Default


    We are facing same issue. We are loading 300 items with images and text and it is taking long to load the app. Can anyone help me out...?

    What is the best way and that would be great is someone has implemented code. Its very urgent for me.