Issue with scrolling when using ng-repeat and list of images


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 each image (you can imagine an Instagram or Facebook-like feed of vertical images on a page). I seem to have the issue both when I load the page in Safari as well as on an iPhone. I know there are other posts related to issues on Android, but I’m only building for iOS and am seeing the issue there (and in 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 and there’re no lag issues:

<img ng-src="">

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

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


Hey there! Are the images all on S3, or are some of them stored locally?


All of the images are on S3

Thanks for the quick reply!


Have you checked out collection repeat?


I’d prefer not to use it since collection repeat has a bunch of requirements about css etc that will involve refactoring code and I’m not convinced this is the issue since I’m seeing very glitchy/laggy scrolling when there are just a few images and posts (nowhere near a 100 let alone 1000). However, I’ll try it out when I have time… any other suggestions would be appreciated in the meantime!