How do I fix laggy/choppy scrolling through images with Angular + Ionic?

1
votes

I'm building an iOS app with Phonegap, Ionic and Angular, and am having an issue where when I'm using ng-repeat with img src (or ng-src) the scrolling for a page of images becomes unacceptably jittery / laggy when scrolling past the images (you can imagine an Instagram or Facebook-like feed of images on a page). I seem to have the issue both when I load the page in Safari as well as on an iPhone. Chrome seems to be much better, so I perhaps it's a problem related to Safari?

I'm using standard ion-content tags. My ng-repeat is 

<div ng-repeat="post in myPosts track by $index">

If I have the following code within the ng-repeat it works fine and the scrolling is perfect:

<img ng-src="https://s3.amazonaws.com/exampleS3Bucket/photos/somephoto.jpg">

However, when I try to use angular to have different images for each item in the repeated array I encounter the lag issue:

<img ng-src="{{post.image.url}}" >

I've tried using various ion-content scrolling settings and Bindonce, but nothing has helped so far. Appreciate any help you can provide!

2
angularjssafariionic-framework

2 Answers

8
votes

You can try overflow-scroll="true" in ion-content tag.

Example:

<ion-content overflow-scroll="true">

It gave me huge performance boost.

2
votes

You should take a look at the new collection repeat feature of Ionic, it helps you increase the performance for huge lists. Here you have an extensive code example.

From the docs:

<ion-content ng-controller="ContentCtrl">
  <div class="list">
    <div class="item my-item"
      collection-repeat="item in items"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}">
      {{item}}
    </div>
  </div>
</div>