One of the features in my application involves displaying feeds or a timeline. Below is the ng-repeat code I am using:
<div ng-repeat="x in feeds" class="fd-feed-card">
<div class="fd-feed-usr-img">
<img ng-src="{{x.user.media[0].small}}" class="fd-img fd-img-br border-style">
</div>
<div class="ft-16 fd-feed-usr-name">
<span><b>{{x.user.name}}</b></span><span class="ft-12 fd-feed-created-time plx prm">{{x.feed.createdTimeStamp | readableTime}}</span>
</div>
<div ng-style="imgStyle">
<img ng-src="{{x.feed.media[0].medium}}" class="fd-img objectcover image-blur">
</div>
<div ng-if="x.feed.total_comments > 0 || x.feed.total_likes >0">
<p class="mll"><span on-tap="openCommentModal(x.feed._id, $index, x.feed)" class="prm" ng-if="x.feed.total_comments > 0">{{x.feed.total_comments}} Comment</span><span ng-if="x.feed.total_likes>0" on-tap="openUserModal(x.feed._id)">{{x.feed.total_likes}} Likes</span>
</p>
</div>
<div class="fd-feed-distance">
<span class="plx prm ft-16">{{x.distance}} <span class="ft-10">mil</span></span>
</div>
</div>
In addition to this, each feed includes a username, user image, a 400*400px feed image, and distance. To implement infinite scrolling with Ionic, I use the following code:
<ion-infinite-scroll on-infinite="getDashboardFeed()" distance="1%" ng-if="!noMoreFeedContent"></ion-infinite-scroll>
Within my JavaScript code, I make API calls with pagination fetching 5 feeds at a time. Here is the relevant JavaScript snippet:
$scope.getDashboardFeed = function(start) {
var _start = start || false;
var params = {}
params.offset = offset;
params.limit = limit;
Posts.getAllFeeds(params).success(function(res) {
// Code logic for fetching, processing, and displaying feeds
})
.error(function(err) {
})
};
I also calculate distances between feeds based on current location and check if I have liked a post. However, when the number of loaded feeds reaches around 25-30, the scroll performance becomes laggy on Android devices. Despite trying native scrolling and collection-repeat feature, I haven't been able to resolve this issue.
Seeking advice, I have explored resources such as this link and this article, but without much success. With the need to handle thousands of feeds, each containing a large image, I am looking for alternative approaches to improve scroll performance. Any suggestions or insights would be greatly appreciated.