Optimizing large list View in Ionic App

I Am trying to fetch data from http, json array and display in list view and there is over 1000 items and loading all of them at once makes scrolling so laggy and am trying to load 20 items first and when scrolled down i want to load more 20 items but my code is not working. Can anyone help me out.

HTML

 <ion-content ng-controller="ListController" on-infinite-scroll="addMoreItem"     class="has-subheader" scroll-watch >
      <ion-list >
        <ion-item href="{{ item.url }}.jpg" ng-repeat="item in id | limitTo:numberOfItemsToDisplay" class="item-thumbnail-left item-text-wrap" >
          <img src="{{ item.thumbnailUrl }}.jpg" alt="Photo">
          <h2>
            {{item.id}}
          </h2>
          <p>{{item.title}}</p>
        </ion-item>
      </ion-list>
  </ion-content>

AngularJS

 .controller('ListController',['$scope','$http',function($scope,$http){
     $http.get('http://jsonplaceholder.typicode.com/photos').success(function(data){     
    $scope.id = data;
   })
     $scope.numberOfItemsToDisplay = 20; // number of item to load each time 
     $scope.addMoreItem = function(done) {
     if ($scope.item.length >= $scope.numberOfItemsToDisplay)
     $scope.numberOfItemsToDisplay += 20; // load 20 more items
      done(); // need to call this when finish loading more data
   }
   }])

Answer

When dealing with huge lists, ionic suggest that you should use the collection-repeat directive instead of ng-repeat cause it gives a far more better performance. collection-repeat renders into the DOM only as many items as are currently visible and thats how it keeps the performance up. Please read more on the official doc here: collection-repeat

Advertisement

Answer