CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-ng-repeatlazy-loading
Nitish Kumar
Nitish Kumar

Reputation: 39

Browser get freezed after loading huge data in angularjs (2k rows)

I am fetching data from server its loading time is quite good, But while rendering all data almost 3k rows to view (angularJs) browser get freeze and after some time its crashed also.
I tried pagination but after crossing 500 rows its start freezing. Some time its load all data into view but while scrolling or applying some event like click again got freeze.

Here is the code where i am listing all data.

 <div class="divRow" ng-repeat="list in campaignDetailListfilterCopy.campaign_items | limitTo:totalDisplayed"">
                <div class="divCell">
      <div style="float:left;width: 325px;">
         <div>
           <span ng-if="list.monitor_type == 3">{{list.items.media_id}}</span>
             <div class="moImgPreview hoverPreview creativePreview">   <img alt=""ng-src="{{list.items.media_thumbnail}}"/></div>
           </span>
       </div>
       <p><strong class="lang" key="campaign_List_view_text2">Location</strong><span>{{list.items.media_address}}</span> </p>                                                                                                                                
    </div>
</div>

<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.campaignDetailListfilterCopy.campaign_items = data;

Upvotes: 3

Views: 1476

Answers (1)

Jazib
Jazib

Reputation: 1381

you should keep two separate lists one holds all the data and the other one should hold only 20 at first and when you press load more it should add 20 more to the list from the list that has all the data with a loop

$scope.loadMore = function(){
let start = $scope.listToShow.length;
 for(let i = start; i<= start + 20; i++){
   if(angular.isDefined($scope.campaignDetailListfilterCopy.campaign_items[i]) {    
 $scope.listToShow.push($scope.campaignDetailListfilterCopy.campaign_items[i]);
   }

 }
}

$scope.listToShow= []
$scope.campaignDetailListfilterCopy.campaign_items = data;
$scope.loadMore();

And in your html 

<div class="divRow" ng-repeat="list in listToShow">

and maybe inside your list you can add a button that calls the loadMore

<button ng-click="loadMore()"> load more</button>

Upvotes: 3

Related Questions