Hi,
I am building an “album” project, wherein a user is displayed multiple albums.
When the user clicks on an album, he is shown all the photos present in the album.
The photos in the album are actually present in S3. The user is also provided a option to add more photos into the album.
I am facing performance issues when I scroll through all the images in the album.
I am looking into some way to improve the scrolling performance. I have already limited the photo resolution to a max of 800 X 600.
Could you please suggest some way to improve the performance.
Here is a link to a demo codepen
Thanks for your quick response.
However one thing is still not clear for me is how do I calculate the height of item.
According to point no 2 in http://ionicframework.com/docs/api/directive/collectionRepeat/, we must explicitly find the size of each item? My item is a link to an image in s3 bucket and not the actual image, secondly, my actual itemcontains additional data like, who posted it, number of likes, an optional comment on the image, which I display along with each image. By setting the width and height to 100% will only show 1 photo per screen. Can I make a variable height collection-repeat where the height is determined by the item. Is there something like a auto feature in collection-repeat? Or is it by making it auto we will negate all the performance benefit we get from collection-repeat?
You can set some variable heights, whether the height is 40px, 100px, etc.
They reason you can’t do 100% is because of how collection repeat works.
Items need to have a known height in oder to be shuffled around correctly.
My item elements could be either text post which can be one liners or photos which can consume a lot of screen space. So how does setting to a height of 40px or 100px help. I think the photos wont be rendered properly at all.
Please advice.