Ion Tindercards- Improve $http/API loading


#1

Hi,

I’m using the ionic Tinder cards (here- https://github.com/driftyco/ionic-ion-tinder-cards) which are excellent.

I have configured them with an $http, which works fine when I told the factory to pull individual items (ie not in a json list).

However, I now have items coming through in a list. It is very very inefficent, buggy and slow. Images randmonly load and appear out of their div. Pulling just json object at a time works fine- but it isnt’ suitable for our server.

On a plunker:

Can some please help me improve its’ performance?

Thanks


#2

A little late here, but hoping this trick helps others looking to improve performance and reduce lags when swiping a card.
The problem here is iterating on whole data at a time loads too much images in the DOM which makes it laggy. Instead try making an array of about 5 elements at a time from your data and use ng-repeat to iterate over that array.
Something like

$scope.cardDestroyed = function (index) {
$scope.Mylist.splice(index,1);
if($scope.Mylist.length==0){
    $scope.Mylist=$scope.cards.slice(i,i+5);
    i=i+5;
    }
}

and then iterating

ng-repeat="card in Mylist"

hope this helps someone.