I’ve got an ionic list that can grow pretty long and includes an image on each list item. This can become a bit of a memory problem, even though I’m using infinite scroll to implement a degree of lazy loading. If the user scrolls far enough, they will crash.
I’m working on a way to recycle memory from the images by removing them when scrolled out, adding them back when scrolled in. Most of that isn’t all that difficult to do, but the problem is I’m not seeing memory actually get freed.
I’ve tried remove(), removeChild(), replaceChild(), as well as setting src to a tiny image and a few other common tricks. So far, the memory appears to be hanging around no matter what I do.
Any suggestions? What might be keeping the images hanging around in memory? The images themselves don’t appear to have any event bindings, and at any rate swapping out the src should be unloading the original image, I’m just not seeing memory use go down.
1 Like
I know that with dynamic images in a slide-box, I’ve gotten a big boost in performance with ng-if
You should take a look at our collection repeat. I can handle huge lists and make an app much more performant.
http://ionicframework.com/docs/api/directive/collectionRepeat/
3 Likes
And this is why it’s good to be thoroughly familiar with a framework so you don’t reinvent the wheel. collection-repeat does the trick very nicely; the list isn’t eating up memory and it’s performing loads better than it had been without it.
One thing: it doesn’t appear to allow multiple parameters like ng-repeat; ie:
ng-repeat="(propertyId, property) in propertyList"
That didn’t work with collection-repeat; had to fall back to just:
collection-repeat="property in propertyList"
I can work around that, but it would be nice to be able to get multiple parameters.
Glad to be able to help. Yeah I’m not sure if parameters are enabled for collection repeat. You should open an issue for this to be added to collection repeat.