iOS Recieved Memory Warning- then terminated due to Memory Pressure

I have a side menu navigation and within the main ui-view is a slide box with text and images. Total slides so far is 28 pages, but will eventually need to be closer to 54. I have so far only 8.1 mb of images spread throughout the slidebox slides. Why would I receiving this warning and how can I fix.

Thanks,
Katherine

how large are your images? makes sure you are using properly sized images and I would look for a solution to lazy load the images as they are needed in the view, does that make sense? Also what device are you testing on?

images vary in size but here is screenshot showing image sizes from largest to smallest. I am testing on an iPad mini and iPad older version both with ios7. works in simulator but not on the devices. i tried hosting the images on my server and deleted images folder to see if the images were the issue, but it actually seemed to use more memory when I would host images on server.

looks like a known issue with safari, some solutions available here on stackOverflow http://stackoverflow.com/questions/2986039/ipad-iphone-browser-crashing-when-loading-images-in-javascript?lq=1

does anyone know how I can implement something similar to the swipe card example https://github.com/driftyco/ionic-contrib-swipe-cards/ except with the slide box. It looks like the swipe cards are only loaded once they are in the current view. I would like to implement similar technique but with my slide box.

Try using ng-if on the slides that are not the current slide. That way, the images are not actually put on the DOM unless they are on the currently viewed slide.

would you apply ng-if to the <ion-slide>? or how would you set that up

See this sample.

I’m applying ng-if to the content inside the slide. Do NOT apply it to the slides themselves. Things get ugly then.

FYI : I had to use the $ionicScrollDelegate to get the active slide because of this bug :https://github.com/driftyco/ionic/issues/1225

can I apply the ng-if to the <ion-content>

If you have <ion-content> inside your slides, I think you can. It’s the <ion-slide> that will kill you.

Give it a whirl.

Hi! So I added ng-if to a div inside of ion-content for every slidebox slide. Total of 57 slides. I am still dealing some serious memory issues when I build for ios. I am not sure what my options are. I have optimized all my images using jpegmini and have my app almost completed. Only thing holding me back is this memory issue when I build. Any suggestions? I can share my code if someone wants to have a go. Here is a url to preview it to see how many slides I have and inspect elements quickly. www.kmartinezmedia.com/annualreport

In your example, the slides are always included in the html, do you?

I’ve found a simple way to solve it by ng-if and $index:

<ion-slide-box on-slide-changed=“slideChanged(index)” show-pager=“false” ng-if=“Images”/>
<ion-slide ng-repeat=“image in Images”/>
<img width=“100%” ng-if="$index==currentSlide || $index==0" ng-src="{{image}}"/>""
</ion-slide/>
</ion-slide-box/>

$scope.slideChanged = function(currSlide) {
$scope.currentSlide = currSlide;
}