3

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;
Nitish Kumar
  • 39
  • 6
  • 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 Jul 31 '19 at 08:44
  • 500 rows means, after clicking on load more from 20 rows to increase 500 rows then its creating problem – Nitish Kumar Jul 31 '19 at 08:47
  • add 50 more at that point, not 500 – Rene Pot Jul 31 '19 at 08:56
  • Also, are you adding them one by one or all at the same time? – Rene Pot Jul 31 '19 at 08: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 Jul 31 '19 at 09:02
  • load all 500 rows from the server in a staging-array; place 50 rows in the array that gets rendered on the page; on each click of 'load more', add 50 more rows from staging-array to this rendered-array; – Akber Iqbal Jul 31 '19 at 09:12
  • doing the same @AkberIqbal but my question is after reaching 500 rows (20 + 20 + 20....) browser start freezing – Nitish Kumar Jul 31 '19 at 09:20
  • That does not sound normal 500 rows shouldn't be a problem for a browser. Maybe you have some kind of memory leak? – kevinSpaceyIsKeyserSöze Jul 31 '19 at 09:42
  • May be it can happen,but how can i find anything about memory leak ?? suggestion or any link ? which can help me @kevinSpaceyIsKeyserSöze – Nitish Kumar Jul 31 '19 at 10:05
  • [How to find JS Memory Leaks](https://stackoverflow.com/questions/15970525/how-to-find-js-memory-leaks) – kevinSpaceyIsKeyserSöze Jul 31 '19 at 10:10

1 Answers1

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>
Jazib
  • 1,343
  • 13
  • 27
  • 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 – Nitish Kumar Jul 31 '19 at 11:01
  • 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 Jul 31 '19 at 11:05
  • @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 – Jazib Jul 31 '19 at 11:10
  • 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. – Nitish Kumar Jul 31 '19 at 11:31
  • @NitishKumar can you create a plunkr ? – Jazib Jul 31 '19 at 11:56