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?
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.
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.
Smooth carousel transitions possible when having more than a few elements?
Reply With Quote
