javascript - app stucks when appends data -

i have mobile application. use angular , ionic , app's idea have feed posts. when user reach 70% ( example) of feed, append new posts view. have 5 posts beginning , append 5 posts each time. after first 5 appended posts, app stucks half second. if scrolling fast when reach 70%, scroll stops , app stucks 0.5 second, can scroll again.

this how implementing functionality:

  <div>     <div ng-repeat="post in posts">       <div ng-include src="'js/post/post.html'"></div>     </div>   </div>   <ion-infinite-scroll immediate-check="false" on-infinite="appendposts()" distance="30%"></ion-infinite-scroll> 

controller

$scope.appendposts = function() {   $scope.postsfeedpage = $scope.postsfeedpage + 1;   home.loadposts($scope.postsfeedpage); };  $scope.$watch(function(){   return home.getposts(); }, function () {   $scope.posts = home.getposts(); }); 

service

  var posts = [];    this.getposts = function() {     return posts;   };    this.loadposts = function(page) {     return $http({       url: server.url + '/api/posts',        method: 'get',       params: {page: page, token: $rootscope.user.authentication_token }     }).success(function (data) {       posts = posts.concat(json.parse(data.posts));     });   }; 

any idea problem , how can fix issue? if problem in angular's performance, maybe should use somehow requirejs optimize rendering process?

you have problem of performance , there solution can try :

• one-time binding : 1 time binding increase performanc, in case of infinite scroll, didn't tested if work/better. try following code:

   <div ng-repeat="post in ::posts">   <div ng-include src="'js/::post/::post.html'"></div>  </div> 

• track method: track methode use unique identifier , can increase performance. try :

    <div ng-repeat="post in posts track post.id">      <div ng-include src="'js/post/post.html'"></div>   </div> 

• collection-repeat: ionic made directive allows app show huge lists of items more performantly ng-repeat. (edit: solution case).

    <div collection-repeat="post in posts">      <div ng-include src="'js/post/post.html'"></div>   </div>