Images cause Ionic state change to be slow/delayed

Hi there,

I’m trying to implement some state changes in my Ionic application; however, I’m noticing a very significant delay (~5 seconds) after tap and before state change animation. I have a list of images, and tapping each image will change state. In total, I have about 10 images visible on the screen (visible, but not necessarily in the viewport).

The issue that I’m having runs like this:

Tap image -> Delay/Freeze for 5 seconds (sometimes the Back button appears) -> state change animation -> new state. The same thing happens going back to the main screen from the new state. I’ve identified the culprit to be the images that are slowing down the page; however, shouldn’t Ionic be able to handle a few images on the screen without any slowdown?

Anyone have any idea as to how to handle images + state changes? Thanks in advance!

What size are those images?
Have you tried disabling animation between te states?
Every time you change state you need to recalculate the viewport and I think that is what is delaying your app.
Keeping the memory of the view low is key here I think.
I had this once and after generating thumbnails rather than the full size images solved the issue for me.

Resizing the image down did help – but there’s still a 1-2 second delay. I’ll check out the memory usage and see if I can optimize some more.

One problem that has come up is that in order for transitions to be all smooth and native-like, I need to resize to 50% of the original image size. The lower size is noticeable on @3x screens such as the iPhone 6/6+. Any idea how I can account for this, or is this a small sacrifice that I will have to make?

It might be good to look deeper into UI-router for more answers…

How are you routing your views? If you are loading lots of stuff into a new state it takes some time to resolve it all.

If you leave resolve out of the router, the next state will start building the controller visually without the need to wait for a service to resolve a request or such.

1 Like

Thanks for all the help! I’ll definitely look deeper into this. (I’ll also post my solution here just in case anyone else runs into this issue).

I intentionally left most of the data out of the new state until I could fix this issue. In addition, I’m not doing any resolves. Doing what you suggest previously definitely helped cut a few seconds off the lag. I’m thinking of implementing lazy loading, as images that have display:none applied to them seem to improve performance. Will post back when I’ve tested more. Thank you again!

I do process a lot of images in some apps. I either process them through a promise with a spinner or such, or I generate directives to ‘overlay’ the current state and pretend to be another.
That way you take UI-router out of the game completely in your debugging of lag.