Reputation: 32758
I'm working an mobile application built using ionic, angular and cordova. I've a list with 500 items and the scrolling is bad in Samsung Note I. I know 500 is a little big number but I'm curious to know is there any means to improve the performance.
Here is the code,
<ion-list show-delete="showDelete">
<ion-item ng-repeat="user in users" type="item-text-wrap" href="#/tab/user/{{user.id}}" class="item-thumbnail-left item-icon-right">
<img src="{{user.image}}">
<h2>{{user.name}}</h2>
<p>{{user.role}}</p>
<i class="icon ion-ios7-arrow-right"></i>
<ion-delete-button class="ion-minus-circled" ng-click="delete(user)">
</ion-delete-button>
</ion-item>
</ion-list>
Upvotes: 0
Views: 2200
Reputation: 2291
The secret to performant large lists is in reusing DOM elements. You may have 500 items, but only 10 are on on the screen at the same time. So, we can save a lot of memory and CPU time by recycling elements as they go off the screen.
Ionic comes with a directive that does exactly this - check it out.
Upvotes: 3