Slide box performance


What’s the latest recommendations on optimising slidebox with 200+ slides?

I am using

ng-if="$index >= (currentSlideIndex-1) && $index <= (currentSlideIndex+1)"

it works in overall performance as only 3 slides are renderred, but every time i perform a slide, there’s a slight jerk, so looking for a better solution

Do you do like this

No this doesn’t help. Every time I slide, it stops in the middle of a slide for a half second before finishing a slide. It looks like it does too much reflowing/re-calculation between slides

I think I just need to come up with solution where I can show less slides. Currently I have 300+ slides, so even a simple calculation makes transition choke a little bit… Also I think on-slide-change event is firing in the middle of transition, maybe I should bind to webkit transition complete…


I tired ng-if solution, it works, but because on-slide-changed is called in the middle of transition, then it is a bit jerky in the middle of slide while recalculating which item to display

I tried @zarko solution where you only display 3 slides, and have does-continue and then update next object in array after each scroll. The problem here is that it is not updated unless you do $scope.$apply() and ionicslideboxdelegate.update() which re-renders and re-positions items resulting in a quick flickering.

i think both of those issues are due to on-slide-changed is fired in the middle of transition, so I am thinking to listen for webkit transition complete event to do logic in there…

@mhartington and ionic team Are there any plans to make UITableView/collection-repeat inspired slidebox?

we’re looking into all options, but if anyone would like to help out, PRs are always welcomed

How did you manage to listen for webkit transition complete? Did it work?