Slide box performance


#1

Hello.

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


#2

Do you do like this https://github.com/driftyco/ionic/issues/3722#issuecomment-108188463


#3

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


#4

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…


#5

grr,

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…


#6

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


#7

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


#8

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