loading dynamic images into a custom UITableViewCell slows scrolling

I am loading some images dynamically into a UITableView and creating some simple custom cells.

In the cellForRowAtIndexPath method I am passing through the content for each cell like so:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

ImagesCell *cell                = (ImagesCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{

    NSUInteger row              = [indexPath row];
    Playlist *playlist          = [[playlistManager playlists] objectAtIndex:row];
    NSString *thumbPath         = [(NSString *) playlist.imagePath stringByAppendingString: @"100x75.png"];
    NSArray *nib                = [[NSBundle mainBundle] loadNibNamed:@"ImagesCell" owner:self options:nil];

    cell                        = [nib objectAtIndex:0];
    cell.topLabel.text          = playlist.title;
    cell.bottomLabel.text       = playlist.artistName;
    cell.customImageView.image  = [UIImage imageWithData: [NSData dataWithContentsOfURL: [NSURL URLWithString: thumbPath]]];
    cell.opaque                 = YES;
    cell.accessoryType          = UITableViewCellAccessoryDetailDisclosureButton;
}
return cell;}

I am also changing the height like so:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

CGFloat result;
result = ROW_HEIGHT;
return result;}

This all works - in that it loads / shows the content - but when I test it on the device it paused on each cell redraw slightly, causing pretty rough scrolling.

Can开发者_如何学C anyone show me how to load the image in a way that would fix this? I have had a look at some asynchronous examples and apples LazyLoading example but this is my first iphone proj and find it a bit tough going.

If anyone has examples or some code to share that would be a great help.

Many thanks

UPDATE

The answer selected works but loads all the items in before showing the UITableView.

After much cutting and pasting and version control, the best solution seems to be MarkJNet's HJCache

This gives image caching as well as asynchronous loading, its very easy to implement (although I havent got it working with a nib yet but I am hopeful it shouldn't be too tough.

Hope that helps someone.

Thanks again to @RedBlueThing and @Marcelo-Alves

Perhaps you could do your image loading earlier?

Try adding an image property to the Playlist and do the imageWithData when you populate the playlistManager.

Update for comment

So your header for the Playlist object needs to include a UIImage object:

#import <Foundation/Foundation.h> 

@interface Playlist : NSObject 
{ 
    NSURL *imagePath; 
    NSString *title; 
    NSString *subTitle; 
    NSString *mediaType; 
    NSString *artistName; 
    NSInteger id; 

    // Add your image member
    UIImage * image;
} 

@property (nonatomic, retain) NSURL *imagePath; 
@property (nonatomic, retain) NSString *title; 
@property (nonatomic, retain) NSString *subTitle; 
@property (nonatomic, retain) NSString *mediaType; 
@property (nonatomic, retain) NSString *artistName; 
@property (nonatomic, readwrite) NSInteger id;

// and a property , make sure you synthesize this in the implementation 
@property (nonatomic, retain) UIImage * image;

@end

When you set the imagePath property, you can also create the UIImage.

NSString * thumbPath = [(NSString *) self.imagePath stringByAppendingString: @"100x75.png"];

// the property is set as retain, so this will increment our reference count
self.image = [UIImage imageWithData: [NSData dataWithContentsOfURL: [NSURL URLWithString: thumbPath]]];

So you are doing this when you set up the image object (perhaps in the init method), so the processing is done well before the UITableView is displayed.

You don’t need to override - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath to change the height, this will really slow down the table scrolling if not doing right. Just change it in IB.

After much cutting and pasting and version control, the best solution seems to be MarkJNet's HJCache

This gives image caching as well as asynchronous loading, its very easy to implement (although I havent got it working with a nib yet but I am hopeful it shouldn't be too tough.

Hope that helps someone.

Thanks again to @RedBlueThing and @Marcelo-Alves