2016-10-05 11 views
0

私はフィードまたはタイムラインがあるアプリケーションを開発しています。ここイオンスクロール性能問題

<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画像が含まれています。ここに私のNGリピートコードです。このように、イオン無限スクロールを使用して、このイム後:

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

     }) 
}; 

私はまた、現在の場所に基づいてすべてのフィードの距離を計算します。投稿が好きかどうかを確認してください。

問題はフィードが25,30に読み込まれ、スクロールがアンドロイドで遅くなってしまうことです。イムも

、このlinkで与えられたネイティブのスクロールを使用して、私はthis

のようにも、より多くのブログを読んでいるが、私は多くの助けを得るdidntの。すべてのフィードに400 * 400ピクセルの画像が含まれている場合、ここに1000秒のフィードをロードする必要があります。

私もコレクションリピートを試みました。どちらもうまくいきませんでした。

私のスクロール性能を修正する他の方法はありますか? 誰でも私を助けることができますか?

答えて

0

特に、ng-repeatで画像を使用している場合、同じ問題がありました。

私の答えをチェックしてください。here