UITableView remote thumbnail images, with placeholder local image

Question

I've gotten far enough to find out I should likely be using SDWebImage for populating the thumbnails in my UITableView with remote images.

My questions is, how can I have a default thumbnail in each cell that is visible as soon as the cell is displayed and before the SDWebImage finishes loading?

And I suppose the default thumbnail should also be displayed in the cases where there is no remote image available.

advice/suggestions?

thanks all

Answer 1

Initially you can set all cells to have the default image. You then can use a callback delegate to update the required cell to have the image once it is loaded. I currently use JMImageCache for my remote image processing which makes this very easy.

First, add the JMImageCache.h and JMImageCache.m files to your project. Assuming you are using a custom cell for your table called CustomCell which holds the image in an ImageViewer called imageViewer, import the JMImageCache.h file in CustomCell.h. Update your CustomCell interface to make it a JMImageCacheDelegate, also add an NSString image_url field:

@interface CustomCell : UITableViewCell <JMImageCacheDelegate>
{
NSString *image_url; 
...
}

// Also set image_url property fields so that it can be accessed from other files

We then need to handle when an image is finished downloading so that the cell's image will be updated. Synthesize image_url and add the following to CustomCell.m.

- (void) cache:(JMImageCache *)c didDownloadImage:(UIImage *)i forURL:(NSString *)url
{
if ([url isEqualToString:image_url]) {
    [self.imageViewer setImage:i];
    [self setNeedsLayout];
}
}

Then in the file that has your tableView in the cell for row at index path function:

CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:@"CustomCell"];
if (cell == nil) {
    NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:nil options:nil];
    for (id currentObject in topLevelObjects) {
        if ([currentObject isKindOfClass:[UITableViewCell class]]) {
            cell = (CustomCell *)currentObject;
            break;
        }
    }
}

[cell.imageViewer setImage:[UIImage imageNamed:"default.png"]];

//Code for getting string of URL you want for current cell called 'cell_image'

[cell setImage_url:cell_image];
[cell.imageViewer setImage:[[JMImageCache sharedCache] imageForURL:image_url delegate:cell]];

JMImageCache has a simple example on github if you need more assistance.

Answer 2

There is a really good official example from apple about lazy loaded images :

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

The idea is simple, first set your placeholder image as there is no downloading and start downloading image for that field, when it is finished a callback will be called to your tableViewController and just reload the relevant cells in the relevant indexPaths. If download fails callback is never called and your placeholder image will be there forever.