Lazy Loading of several images in UITableView

Question

What are the best practices to download several images and load each of them in a UIImageView which is inside a UITableViewCell? Particularly, should I resize/replace the UI

Answer 1

A common practice for lazy-loading images in a UITableViewCell is to use a notification callback to let the UITableViewCell know when the image has been received.

In essence, you'll want to create a subclass of UIImageView that has an imageURL field that, when changed, fires off a request for the image, and use that instead of a standard UIImageView:

Interface for the UIImageView subclass:

@property (nonatomic, copy) NSString *imageURL;

Implementation for the UIImageView subclass:

//synthesize property
@synthesize imageURL = _imageURL;

- (void)setImageURL:(NSString *)imageURL {
    if(_imageURL)
        [[NSNotificationCenter defaultCenter] removeObserver:self name:_imageURL object:nil];
    _imageURL = [imageURL copy];
    //if imageURL is valid...
    if(_imageURL.length) {
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didReceiveImage:) name:_imageURL object:nil];
        //fire off some asynchronous image fetch
        //when the image fetch completes, sent off a notification using the imageURL as the notification name
        //It's up to you to create the implementation for this yourself
        ... [MyImageManager fetchImage:_imageURL notificationName:_imageURL]; 
    }
}

- (void)didReceiveImage:(NSNotification*)notification
{
    //handle your received image here
    if([notification.object isKindOfClass:[UIImage class]])
    {
        self.myCustomImageView.image = notification.object;
    }
}

And then in the UITableViewCell class when you override prepareForReuse:

- (void)prepareForReuse {
    [super prepareForReuse];
    self.myCustomImageView.imageURL = nil;
    self.myCustomImageView.image = nil;
    //do the rest of your prepareForReuse here:
    ...
}

Now, as far as the whole re-sizing of the images vs resizing of the imageview, what you ought to do is leave the imageView's size alone, and use the contentMode property to handle the varying sizes for the resulting images. Your possible values are:

UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
UIViewContentModeRedraw,
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,

Each of which has their own respective result - you will probably want to use UIViewContentModeScaleAspectFit as this will re-size the image to fit the imageView, without distorting it - this may leave empty margins to the size or top/bottom of the imageView. Aspect fill will do a similar thing, only it will resize the image to be large enough to fill the entire imageView, and may cut off the sides or top/bottom of the image. Scale to fill will just stretch the image to fill the imageView.