0

I have a UITableView which shows Items with images and their name. The problem is that the scroll's lagging because of the loading of the images for each cell.

This is how I am saving the images captured from the iPhone Camera and resized to 320 by 480.

- (void)saveImage: (UIImage*)image{
if (image != nil)
{
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, 
                                                         NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];

    NSString *imageName = [NSString stringWithFormat: @"image_%@.png",[NSDate date]];
    item.imageName = imageName;

    NSString* path = [documentsDirectory stringByAppendingPathComponent: 
                      imageName];
    NSLog(@"%@",path);

    NSData* data = UIImagePNGRepresentation(image);
    [data writeToFile:path atomically:YES];

    NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
    [userDefaults setInteger:[image imageOrientation] forKey:@"kImageOrientation"];
} }

This is how I am resizing it

- (UIImage *)resizeImage:(UIImage*)image newSize:(CGSize)newSize {
CGRect newRect = CGRectIntegral(CGRectMake(0, 0, newSize.width, newSize.height));
CGImageRef imageRef = image.CGImage;

UIGraphicsBeginImageContextWithOptions(newSize, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();

// Set the quality level to use when rescaling
CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, newSize.height);

CGContextConcatCTM(context, flipVertical);  
// Draw into the context; this scales the image
CGContextDrawImage(context, newRect, imageRef);

// Get the resized image from the context and a UIImage
CGImageRef newImageRef = CGBitmapContextCreateImage(context);
UIImage *newImage = [UIImage imageWithCGImage:newImageRef];

CGImageRelease(newImageRef);
UIGraphicsEndImageContext();    

return newImage;}

And this is how I am loading them in cellForRowAtIndexPath

- (UIImage*)loadImage:(NSString *) imageName{
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, 
                                                     NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString* path = [documentsDirectory stringByAppendingPathComponent: 
                  [NSString stringWithString: imageName]];
    UIImage* image = [UIImage imageWithContentsOfFile:path];
    NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
    UIImage *orientedImage= [UIImage imageWithCGImage: image.CGImage scale:1.0 orientation:  [userDefaults integerForKey:@"kImageOrientation"]];

return orientedImage;}

One approach I was thinking of is to have an NSMutableArray with the UIImages loaded in it once and then fetching the images from there. The problem with that approach is that not all cells will have images so say there are 10 cells but only three images in the last 3 cells, the NSMutableArray approach will be a problem here because the images added will be at the indices 0,1,2.

I have one more solution in my mind which I would like to highlight here for you experts to verify if it will work. I actually am using CoreData and have generated the Model for the Item. If I was to manually add a UIImage field in this class and save the image to them objects, will that work or would it be wrong to do that?

Arsalan Habib
  • 1,395
  • 14
  • 20
  • 1
    Use lazy loading, please check this one http://stackoverflow.com/questions/1130089/lazy-load-images-in-uitableview – DLende Jun 06 '12 at 04:19
  • It appears that the said solution is for images downloaded over the net. I am loading the images from the document directory. Does your solution still applies to that too? Thanks. – Arsalan Habib Jun 06 '12 at 04:21
  • 1
    Yes you can, it is like loading images on the background(net or local) and once the images is ready put it on the cell. – DLende Jun 06 '12 at 04:34
  • Ill ask another question as I saw this happen in an app I wrote. I know you say you are resizing the images to 320 x 480, but what is the size you are displaying in on the UITableView? I did originally what you were saying and loaded the images into an array, but because the images themselves coming from the source needed to be resized prior to display within a UIImageView within each cell, the table view lagged. – trumpetlicks Jun 06 '12 at 05:26
  • @trumpetlicks: I am loading the image as it was saved. Is there a way to load a smaller image? – Arsalan Habib Jun 06 '12 at 05:29
  • In my case I had the server perform the resize prior to sending so that the iPhone didn't have to do that work. In your case you COULD perform the resize to even smaller prior to storing in your image (i.e. pre-process them) array for your UITableView so that you can display smaller images as thumbnails in your UITableView, OR alternatively in your image save routine, you could also save thumbnail versions of your images to the smaller size as well. – trumpetlicks Jun 06 '12 at 05:34
  • 1
    I definitely agree with the lazy loading as it puts the loading on a different thread. Because your images are on device and not through a slow 3G type connection, you may simply hold off displaying that view until your files have all been loading and use a spinner to show that you are working. Of course Im on the UI Design side of never let the user have access to the view until it is completely available side of the house. If the images are part of your interface hold off the user until your interface has completed loading. – trumpetlicks Jun 06 '12 at 05:38

0 Answers0