離子滾動性能問題

Question

我正在開發具有提要或某個時間表的應用程序。 這是我的ng-repeat代碼：

<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>

這里每個提要都包含用戶名，userimage和提要和距離的400*400px圖像。 在此即時通訊使用離子無限滾動后，如下所示：

<ion-infinite-scroll on-infinite="getDashboardFeed()" distance="1%" ng-if="!noMoreFeedContent"></ion-infinite-scroll>

在我的JavaScript代碼中，我一次調用具有5個供稿的分頁調用API。 這是我的JavaScript代碼：

$scope.getDashboardFeed = function(start) {
    var _start = start || false;
    var params = {}
    params.offset = offset;
    params.limit = limit;
    Posts.getAllFeeds(params).success(function(res) {
            if (_start) {
                $scope.feeds = [];
            }
            if (res.data.length < limit) {
                $scope.noMoreFeedContent = true;
            } else {
                $scope.noMoreFeedContent = false;
            }

            for (var i = 0; i < res.data.length; i++) {
                var markerPos = new google.maps.LatLng(res.data[i].feed.location[0], res.data[i].feed.location[1]);
                var currentLatLng = new google.maps.LatLng(res.data[i].location.location[0], res.data[i].location.location[1])
                var distance = google.maps.geometry.spherical.computeDistanceBetween(markerPos, currentLatLng) * 0.000621371;
                res.data[i].distance = distance.toFixed(2);
                for (var j = 0; j < res.data[i].feed.likes.length; j++) {
                    if (uid == res.data[i].feed.likes[j].user) {
                        res.data[i].isLiked = true;
                        break;
                    } else {
                        res.data[i].isLiked = false;
                    }
                }
                $scope.feeds.push(res.data[i]);

            }

            offset = offset + limit;
            if (_start) {
                $scope.$broadcast('scroll.refreshComplete');
            } else {
                $scope.$broadcast('scroll.infiniteScrollComplete');
            }
        })
        .error(function(err) {

        })
};

即時消息還會根據當前位置計算每個Feed的距離。 並檢查我是否喜歡該職位。

現在的問題是，當feed加載到25,30時，滾動在我的android中變得遲鈍了。 我還使用此鏈接中提供的本機滾動，

我已閱讀也更喜歡博客這種

但是我沒有得到太多幫助。 我必須在此處加載1000個供稿，其中每個供稿都包含400 * 400px圖片。

我也嘗試過收藏重復。 它也不起作用。

我還有其他方法可以嘗試解決滾動性能問題嗎？ 有人可以幫我嗎？

Answer 1

我有同樣的問題，尤其是在ng-repeat中使用圖像時。

在這里查看我的答案