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


#1

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


#2

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


#3

All of the images are on S3

Thanks for the quick reply!


#4

Have you checked out collection repeat?

http://demo.ionicframework.com/nightly/collectionRepeat/contacts/


#5

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!