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

Question

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;

500 rows fit on no screen that will ever load your site. Try loading as many items as 2 screens full and only load more when the user needs it. I don't know how big your rows are, but I'd say 50-75 rows should be the max you should render at once — Rene Pot
– Rene Pot, Commented Jul 31, 2019 at 8:44
500 rows means, after clicking on load more from 20 rows to increase 500 rows then its creating problem — Nitish Kumar
– Nitish Kumar, Commented Jul 31, 2019 at 8:47
Also, are you adding them one by one or all at the same time? — Rene Pot
– Rene Pot, Commented Jul 31, 2019 at 8:56
I have to display 2k rows. initially i m displaying 20 rows and there is a button to load more , after clicking load more its loading 20 more rows from data (already loaded data from server). Now after clicking again and again on load more when its reached 500 or more row, then browser getting freezing on next load more click — Nitish Kumar
– Nitish Kumar, Commented Jul 31, 2019 at 9:02

Jazib · Accepted Answer · 2019-07-31 11:09:00Z

3

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>

edited Jul 31, 2019 at 11:09

answered Jul 31, 2019 at 10:02

Jazib

1,37914 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nitish Kumar Over a year ago

showing error :- listToShow is not defined . is $scope.listToShow and listToShow are two diffrent varriable or same? if both are same then it will go in infinite loop..please clear little more @Jazib

Jazib Over a year ago

Hi nitish yes they are the same variables. you should define it on top of your controller as empty list, and when you get the data you call $scope.loadMore() Ah nice catch. I will update my answer to avoid the infinite loop

Jazib Over a year ago

@NitishKumar check it out now, I also added a condition so you don't get the undefined error if index is something that exceeds the length of the list containing all data

Nitish Kumar Over a year ago

now your code is working fine but .it did not solve my problem.. still same issue. after reaching more number or rows its start freezing.

Jazib Over a year ago

@NitishKumar can you create a plunkr ?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related