iOS Recieved Memory Warning- then terminated due to Memory Pressure


#1

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


#2

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?


#3

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.


#4

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


#5

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.


#6

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.


#7

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


#8

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


#9

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


#10

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.


#11

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


#12

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


#13

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;
}