Swipeview lagging on item change

Question

I am using this: https://github.com/nicklockwood/SwipeView

I am using it in 2 different places in my app.

30x30 images on screen about 100kb file size, no problem in this part
150x150 images on screen 1-3mb file size, these are photos taken by ios camera.

On the 2nd one when swipeViewCurrentItemIndexDidChange method is called, the app is lagging for about 0.5 seconds which does not cause a good experience for the user. I know it is happening because the image is loading and I tried to improve the process but I was unsuccessful. I wish to speed this up so the user can not feel the items loading. The images are loaded from the device, no internet connection is involved.

I know these operations are done all the time in image gallery and facebook app without lagging. So something is wrong with either my code or this library I am using.

http://pastebin.com/XyCaRaig

Maybe you should just load the images in the beginning just creating an array of `UIImages` rather than filenames. — carloabelli, Jul 08 '14 at 14:12
then it eats too much ram, I used that on another slider. This slider doesn't seem to work like that anyways — Esqarrouth, Jul 08 '14 at 16:18
I'm not quite sure how individually loading images and loading them into an array all at once would use up significantly different amounts of memory. Also what exactly do you mean in the second sentence? — carloabelli, Jul 08 '14 at 16:29
Yes, what do you mean by "This slider doesn't seem to work like that anyways"? You've tried loading the images to an array and you still get the lag? — spassas, Jul 09 '14 at 12:26
It designed to only load the amount of images that are shown in the screen only to save ram. So when you slide, it loads the new images and unloads the older ones. This works perfectly with smaller sized images but lags on large image — Esqarrouth, Jul 09 '14 at 18:13
Image is 1mb, there are 200. So in total it would take 200mb ram just for images. But with this it only loads 3, so it takes 3 to 5mb ram at any time — Esqarrouth, Jul 09 '14 at 18:14

score 1 · Answer 1 · answered Jul 10 '14 at 08:23

150x150 images on screen 1-3mb file size, these are photos taken by ios camera.

Here are my two suggestions to speed it up.

Suggestion 1

The ALAssetsLibrary library will run on a separate thread. I propose to do the UI related stuff in main thread. Usage of -performSelectorOnMainThread: or dispatch_sync(dispatch_get_main_queue() inside the ALAssetsLibrary block will resolve your issue.

Example:

   [library enumerateGroupsWithTypes:ALAssetsGroupSavedPhotos usingBlock:^(ALAssetsGroup *group, BOOL *stop) {
        [group enumerateAssetsWithOptions:NSEnumerationReverse usingBlock:^(ALAsset *result, NSUInteger index, BOOL *needToStop) {

        dispatch_sync(dispatch_get_main_queue(), ^{

          UIImage *image = [UIImage imageWithCGImage:result.defaultRepresentation.fullScreenImage];
          //do UI stuff here.

    }); }]; }

   failureBlock:^(NSError *error) {
               NSLog(@"%@",error.description);
  }];

or

   [library enumerateGroupsWithTypes:ALAssetsGroupSavedPhotos usingBlock:^(ALAssetsGroup *group, BOOL *stop) {
        [group enumerateAssetsWithOptions:NSEnumerationReverse usingBlock:^(ALAsset *result, NSUInteger index, BOOL *needToStop) {

             UIImage *image = [UIImage imageWithCGImage:result.defaultRepresentation.fullScreenImage];
            [self performSelectorOnMainThread:@selector(usePhotolibraryimage:) withObject:image waitUntilDone:NO];

      }]; }

   failureBlock:^(NSError *error) {
               NSLog(@"%@",error.description);
  }];

- (void)usePhotolibraryimage:(UiImage *)myImage{

    //do UI stuf here.
}

Suggestion 2

Use AlAsset aspectRatioThumbnail instead of fullResolutionImage for high performance

dispatch_sync(dispatch_get_main_queue(), ^{

    CGImageRef iref = [myasset aspectRatioThumbnail];
    //CGImageRef iref = [myasset thumbnail];
    UIImage *image = [UIImage imageWithCGImage:iref];

 });

These seem like they are going to work, but I couldn't find a way to implement them in my code. Any suggestions? — Esqarrouth, Jul 15 '14 at 00:47
@Esq: please provide the swipeViewCurrentItemIndexDidChange method related code bases. I will fix it. — Shamsudheen TK, Jul 15 '14 at 04:27
or the photo-library image fetching code base.. or you can send the latest sample app to ramshadram90@gmail.com — Shamsudheen TK, Jul 15 '14 at 04:31

score 1 · Accepted Answer · answered Jul 14 '14 at 16:00

if(self.pictures[index] != NULL) //(self.pictures[index] != NULL) //(button == nil) //(self.currentArray[index][2] != NULL)
    {
    UIImage *image = [UIImage imageWithContentsOfFile:self.pictures[index]];
    button = [UIButton buttonWithType:UIButtonTypeCustom];

    NSString *machineName = [MasterClass whichMachine];
    if ([machineName isEqual:@"ipad"]) {
        button.frame = CGRectMake(0.0, 0.0, 220, 220);
    } else if ([machineName isEqual:@"iphone4"])  {
        button.frame = CGRectMake(0.0, 0.0, 120, 120);
    } else if ([machineName isEqual:@"ipod"])  {
        button.frame = CGRectMake(0.0, 0.0, 120, 120);
    }
    else{
        button.frame = CGRectMake(0.0, 0.0, 140, 140);
    }
        [button setBackgroundImage:image forState:UIControlStateNormal];
        .....

I noticed that you are using the full-resolution image in a small area, and it costed a lot unnecessary resource to load from CPU/GPU. It's lucky for you that didn't crash at all. I would suggest you to compress the size of the image which is shown on button and show it with full-resolution when it is necessary. That's how the Facebook does.

score 0 · Answer 3 · answered Jul 09 '14 at 23:25

I do not know Swipeview but there are 2 things I would try depending on what is possible to do with it.

1- modify the quantity of image the the plugin preload or load them yourself before feeding them to the plugin. If you show 3 images on screen and user can scroll in both direction without paging you may want to preload 10-20 images

2- with a background thread, go through all the image within range of user swipe (again a 10-20 images range should be enough) load the image from the librairy, shrink it and save it in a cache folder. It should only load the already optimized images from that folder to show the user.

Zasuk · Answer 4 · 2014-07-15T11:30:17.830

Facebook app uses https://github.com/rs/SDWebImage to load images...

First of all you have lag because you don't reuse the views in SwipeViewDataSource. You need to do something like this

- (UIView *)swipeView:(__unused SwipeView *)swipeView viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
    UIButton *button = (UIButton *)view;
    if(!button) {
        button = [UIButton buttonWithType:UIButtonTypeCustom];
    }

    NSString *imageFile = self.pictures[index];
    NSLog(@"Image that will be loaded : %@",imageFile);

    if(imageFile) {
        UIImage *image = [UIImage imageWithContentsOfFile:imageFile];

        NSString *machineName = [MasterClass whichMachine];
        if ([machineName isEqual:@"ipad"]) {
            button.frame = CGRectMake(0.0, 0.0, 220, 220);
        } else if ([machineName isEqual:@"iphone4"])  {
            button.frame = CGRectMake(0.0, 0.0, 120, 120);
        } else if ([machineName isEqual:@"ipod"])  {
            button.frame = CGRectMake(0.0, 0.0, 120, 120);
        } else{
            button.frame = CGRectMake(0.0, 0.0, 140, 140);
        }

        [button setBackgroundImage:image forState:UIControlStateNormal];
        button.tag = 100 + index;

        [button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
    }

    return button;
}

and then, the main problem is the image decompressing...the system needs to decompress the images before show on screen and that needs to be done in background (if you don't want lag)... Decompress the image is a bit tricky so try to use SDWebImage because it will decompress the images in background for you ;)

to load local files with SDWebImage see this: https://github.com/rs/SDWebImage/issues/153

If you want to read a little about this problem you can check this old post on cocoanetics: http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/

when I write !button, it does decrease the lag significantly. but lets say there are images named 0,1,2,3,4,5,6,7 in this order in the code I provided. The order of these become 0,1,2,0,1,2 when i add !button. So I can not get any more than the 3rd image. — Esqarrouth, Jul 14 '14 at 23:46
i've changed the code in the answer, try to use my method version (is based on your code) and check the logs to see if image file that will be loaded is correct... — Zasuk, Jul 15 '14 at 11:35
http://pastebin.com/sLgYs9Au I made 3 swipes to right, 3 swipes to left. It does work, but exactly like I made it. It didn't speed up, still lags. — Esqarrouth, Jul 15 '14 at 11:54
humm, try to use SDWebImage to load the images... you need help for that? i can try to make a demo later... — Zasuk, Jul 15 '14 at 13:29
I am not taking the images from the web, they are from the app files. — Esqarrouth, Jul 15 '14 at 17:52

Swipeview lagging on item change

4 Answers4