Monday, May 21, 2012

Lazy load images in UITableView


I have some 50 custom cells in my UITableView. I want to display an





image and a label in the cells where I get the images from URLs.



I want to do a lazy load of images so the UI does not freeze up while

the images are being loaded. I tried getting the images in separate

threads but I have to load each image every time a cell becomes

visible again (Otherwise reuse of cells shows old images) Can someone please tell

me how to duplicate this behavior.



Any other suggestions are welcome



Thanks.


Source: Tips4all

7 comments:

  1. I made a free library designed just for this... HJCache. Its very easy to use.
    http://www.markj.net/hjcache-iphone-image-cache/

    ReplyDelete
  2. Jeff LaMarche (author of Beginning iPhone Development) has written a tutorial on how to do this: http://iphonedevelopment.blogspot.com/2010/05/downloading-images-for-table-without.html

    His example doesn't use threads and does cached images that have already been loaded.

    ReplyDelete
  3. I'd suggest going for an NSOperation and doing whatever you need on another thread.

    This is a class I wrote for image loading:

    - (id)initWithTarget:(id)trgt selector:(SEL)sel withImgURL:(NSString *)url {
    if(self = [super init]) {
    if(url == nil || [url isEqualToString:@""])
    return nil;
    target = trgt;
    action = sel;
    imgURL = [[NSURL alloc] initWithString: url];
    }
    return self;
    }

    - (void)main {
    [NSThread detachNewThreadSelector:@selector(loadImage) toTarget:self withObject:nil];
    }

    - (void)loadImage {
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
    UIImage *img = [UIImage imageNamed: @"default_user.png"];
    if(![[imgURL absoluteString] isEqualToString: @"0"]) {
    NSData *imgData = [NSData dataWithContentsOfURL: imgURL];
    img = [UIImage imageWithData: imgData];
    }
    if([target respondsToSelector: action])
    [target performSelectorOnMainThread: action withObject: img waitUntilDone: YES];
    [pool release];
    }

    - (void)dealloc {
    [imgURL release];
    [super dealloc];
    }


    Hope that helps!

    ReplyDelete
  4. try this tutorial

    http://developer.apple.com/library/ios/#samplecode/LazyTableImages/Introduction/Intro.html

    ReplyDelete
  5. You can also try EGOImageLoading. There is also a demo, which shows how to use it.

    ReplyDelete
  6. I think there is another way to solve that problem if you want to load that image then at the start of the view thats mean

    when -(void)loadView is loading, then just allocate these images and take it into a nsarray now when table cell is loading then make your view at the table cell and according to the indexPath.row just replace these images of nsarray into that view as a background image or make subview of these images on that new view of tablecell using nsarray index and indexPath.row of the tableview cell.

    ReplyDelete
  7. I am not aware of any built in way to accomplish this but it sounds like you have something working with another thread already.

    Assuming that your only remaining problem now is invalidating the contents of a cell when it comes back into view you should look at:

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath


    By implementing this delegate method you could check the contents of the cell before it draws to see if it needs new contents. If it does then you could empty the cells contents and trigger your threaded loading again.

    You might also consider posting some code.

    ReplyDelete