14-beta infinite scroll performance

demo
1

I’m using the .14-beta version of the framework to develop this prototype app( work still in progress). But I must say that 14-beta is pretty buggy but I’m working through it.

I’m however NOT HAPPY with the performance of the infinitescroll. I mean not happy to the point that I’m rethinking about using the whole ionic/angularjs as my framework of choice. However, I’m hoping that this is just a matter of employing more efficient coding methods.

I would appreciate it much if you guys can give it a go on your mobile browsers and provide me with performance feedback and any advice on how to maximize optimal performance. I would really like to deploy the finished product to android 4 and iphone4 devices.

Thanks in advance

2

Anybody? i’ve been trying to rework how to ng-repeat the list items. Do they all get redrawn when new information is added?

3

Yes, i have a similar issue. Let me know if you have a better solution.

4

@rosoweb @icecappacino

One of the main issues anytime you see an infinite scroll plugin is it attaches a callback to the scroll event which is never a good idea. In short it’s a performance nightmare. I wrote my own directive to create an infinite scroll feature within my app that did not utilize the scroll event, and it works great on iOS and android.

Pseudocode…

  1. Make an api call to get an array of data. For this example we’ll get a list of cars
  2. When the cars are received scan the array to get the id of the car that is third from last
  3. Bind the cars to the DOM and give each car an id of {car-id}. Ex: car-1263
  4. Set up an interval that checks every 500ms if the selected car is in view. (1 line of code just google “element in view js”)
  5. You have the cars id so you’re just scanning to see if the user has seen “car-1263” yet.
  6. If the element is in view kill the interval, make another call, find 3rd from last, and repeat

I like this approach b/c…

  • You don’t have to attach any callback to the scroll event
  • You can specify how many cars (or whatever) from the bottom you’d like the event to take place rather then just an arbitrary height
  • If you asked for 10 cars but only received 9 or less you don’t have to set up the interval b/c you know you’re at the end of the list. You can kill the infinite scroll when you receive the data which intuitively just makes sense.

Cheers!

5

Thanks. i will give that a try and get back.

6

Well i replaced the component with a simple onScrollEnd broadcast of the ion-content