1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Exclamation Carousel Performance Portrait vs. Landscape + Orientation change Landscape very slow

    Carousel Performance Portrait vs. Landscape + Orientation change Landscape very slow


    Hi@All,

    I know the question comes up more often but I could not find a satisfactory answer in the forums and wanted to know if anybody can help me.

    I am currently working on a pretty straightforward app. It contains 13 cards via the carousel which displays one main image ( currently about 80kb/image), 2 smaller images (about 20kb each) and 3 divs with a little text per card.

    I already followed the Sencha touch performance guidelines minimizing listeners, layouts on each item etc., optimizing picture size but still running into jerkiness and performance problems; basically that the transition is not smooth but it hangs shortly before changing the card.

    Here it where it gets interesting though:

    1. If I load the page in portrait mode the performance is very good... no jerkiness, no hangs before cardswitch etc. When I flip the app now into Landscape (no listeneres currently on onOrientationChange) it the jerkiness starts. Flip back to Portrait and everything is fast again

    BUT...

    2. If I load the page starting in Landscape mode the jerkiness and hangs between the transition are there (like in point 1) BUT if I switch into Portrait mode the hangs between card transitions persit even though when I start the application Portrait it runs perfectly. Hmm...

    Also, the orientation change from Portrait to Landscape is quite slow (takes always between 2-3 seconds) and doesn't resize all child elements properly from time to time; this behaviour is somewhat irratic.

    Interestingly the transition between cards is always smooth going to the right from the 12 to the 13th slide (end to the right) and going then back to the left from the 2nd to the 1st slide which is kind of strange. Please that I tested this with both larger images (around 200KB/image), smaller images (around 80KB/image) and no images at all.

    I can reproduce these issues in both the Mobile Safari or compiled with Phonegap.

    So to summarize my questions:
    1. Does anybody here has a pointer in how to improve the performance of the carousel in Landscape mode?
    2. An explanation why there is a difference in performance when it is loaded first in Portrait or Landscape
    3. Why transitions between the first and last slides are smooth no matter if I use pictures (small or big) or no pictures at all
    4. Is there a best practice check/workaround to force the elements to properly resize on Orientationchange (maybe setting the width/height manually with 100%)?

    I know that Sencha Touch 2 is much better in speed and layouting but being a Pre-Release and not feature complete I would like to avoid using it if thats possible.

    Hope somebody can help me!!

    cheers,
    Alex

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    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


    This is odd as the DOM size isn't changed, just the width is wider but the height is smaller. DOM size is usually what the performance issues are, how many things are rendered at once.
    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 Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    hi, thanks for your quick reply.

    I am loading all the assets at once since I need to update some elements in there for translation purposes etc. and I thought it is not that much stuff anyway (have to think if I might am able to do that on the fly?). But I only display one image at a time.

    If you want I could give you access to the page - but if possible I would send you the link via PM (don't want to post my personal dev server on the public forum). Would be interesting if you can reproduce it on your end.

    cheers,
    Alex

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    Nobody else ran into these problems? Is there maybe some way to generally improve the speed of the carousel or the layout switch?

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    bowie is on a distinguished road

      0  

    Default Same Problem

    Same Problem


    Hi,

    I ran into the same problem.
    When fresh open the carousel, in both portrait and landscape, card switching is smooth.
    But once orientation change, the card switching transition becomes abnormal.
    say when switch from 1st card to 2nd, can see 5th card flash before 2nd shown.

    Appreciate if anyone can help or share your findings on this.

    I am testing on iOS, by the way.

    Thanks.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    bowie is on a distinguished road

      0  

    Default


    Hi squarefan,

    Did you find any workaround for this problem at last?
    I tried some but no luck. Appreciate if you can share your solution.
    Thanks.

    Bowie

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    @bowie

    Unfortuantely not. The problem was persistent no matter how I changed/optimized the pictures. In the end the layout was changed slightly to compensate for the slowdown and it was OK afterwards - but that might not be a possiblity for you.

    What helped:
    - try to get picture sized under 200K (compromise between quality and size)
    - resizing issue can be overcome - just listen to the on orientationchange event and resize manually
    - start the application in portrait mode (only possible if you use XCode & Phonegap)
    - Upgrade to Touch 2 (did that now in a subsequent version update and Android release) - much better speed, you can use bigger pictures etc.

    Hope that helped a bit. If you need more info just let me know.

    Alex

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    bowie is on a distinguished road

      0  

    Default


    Alex, thanks for your prompt reply.

    My carousel contains not much images but has ~50 cards (may contains up to a hundred later). Most of them are text only.
    I tried the same approach as yours, i.e. to resize manually on orientationchange, but once do that transition not smooth.

    Do you mind tell me how Touch 2 perform? Is the card transition smooth?
    If possible, can send me your code for try out?
    I am a bit reluctant to upgrade to Touch 2 since I may have to rework all I've already done here.

    Thanks in advance.

    Bowie

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."