Question

I have a uitableview which stores one image in one cell. Its image get loaded from internet. The problem is the application get slow till its image get loaded from internet. So I want to put a mechanism that it first get loaded with a default image and when it gets the original then the default image will be replaced by the original one.

Give me any tutorial or any sample code for it.

Thanks in advance.

Answer 1

Get your image trough some other thread …. and use notification or delegate to keep track of any change in image download … suppose you are using notification …. then in class which you set as observer for that notification reload the data of tableView …. so your table image will get updated where there was so default image …. for more detail lets take an example ….. Make a operation class to downloading the image we call it thumb …. In this example I make 2 classes
1. PhotoGalleryVC which shows a list of thumbs and some detail of each thumb and
2. LoadGalleryThumbOp [Op = operation] downloads thumbs and post notification when done

@protocol LoadGalleryThumbDelegate;
@interface LoadGalleryThumbOp : NSObject{

    NSIndexPath* indexPathInTableView;
    id <LoadGalleryThumbDelegate> delegate;
    NSMutableData *activeDownload;
        NSURLConnection *imageConnection;
    NSString * documentPath;
    BOOL imageDownload;
}
@property (nonatomic, assign) NSIndexPath* indexPathInTableView;
@property (nonatomic, retain) NSMutableData *activeDownload;
@property (nonatomic, retain) NSURLConnection *imageConnection;
@property (nonatomic, assign) id <LoadGalleryThumbDelegate> delegate;
@property (nonatomic, retain) NSString * documentPath;
@property (nonatomic) BOOL imageDownload;
- (void)startDownload;
- (void)cancelDownload;
- (void) persistData:(NSData*) data;
@end

@protocol LoadGalleryThumbDelegate 

- (void)appImageDidLoad:(NSIndexPath *)indexPath;

@end

in LoadGalleryThumbOp.m do it as

@implementation LoadGalleryThumbOp

@synthesize year;
@synthesize indexPathInTableView;
@synthesize delegate;
@synthesize activeDownload;
@synthesize imageConnection,documentPath,imageDownload;

#pragma mark

- (void)startDownload
{
    self.imageDownload = YES;
    self.activeDownload = [NSMutableData data];
    NSFileManager* fm = [NSFileManager defaultManager];
    NSString* galleryDocumentPath = [self.documentPath stringByAppendingPathComponent:[NSString stringWithFormat:@"images/thumb.jpg"]];
    if ([fm fileExistsAtPath:galleryDocumentPath]) 
    {
        UIImage *image = [[UIImage alloc] initWithContentsOfFile:galleryDocumentPath ];
         self.gallery.thumpImage = image;
        self.activeDownload = nil;
        [image release];
        self.imageConnection = nil;
         [delegate appImageDidLoad:self.indexPathInTableView];
    }
    else {
        NSURLConnection *conn = [[NSURLConnection alloc] initWithRequest:
                                 [NSURLRequest requestWithURL:
                              [NSURL URLWithString:#error yourImageUrl]] delegate:self];
        self.imageConnection = conn;
        [conn release];
    }
}

- (void)cancelDownload
{
    [self.imageConnection cancel];
    self.imageConnection = nil;
    self.activeDownload = nil;
}


#pragma mark -
#pragma mark Download support (NSURLConnectionDelegate)

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
    [self.activeDownload appendData:data];
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
    self.activeDownload = nil;
    self.imageConnection = nil;
    self.imageDownload = NO;
     [NSString stringWithFormat:@"images/thumb.jpg"]];
    [delegate appImageDidLoad:self.indexPathInTableView];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
    [self persistData:self.activeDownload];    
    self.activeDownload = nil;
    self.imageConnection = nil;
    [delegate appImageDidLoad:self.indexPathInTableView];
}
- (void) persistData:(NSData*) data
{
    NSFileManager* fm = [NSFileManager defaultManager];
    NSString* galleryDocumentPath = [self.documentPath stringByAppendingPathComponent:[NSString stringWithFormat:@"images/thumb.jpg"]];
    if ([[NSFileManager defaultManager] fileExistsAtPath:galleryDocumentPath]) 
    {
        NSError* err = nil;
        [fm removeItemAtPath:galleryDocumentPath error:&err];
        if (err)
            NSLog(@"%s:%@",__FUNCTION__,err);
    }
    [fm createFileAtPath:galleryDocumentPath contents:data attributes:nil];
}

this class will download the image you wanted and will call its delegate when the image is download ..
Now comes its use part in PhotoGalleryVC use it like this

@interface PhotoGalleryVC : UIViewController <LoadGalleryThumbDelegate>{

    IBOutlet UITableView* albumListTableView;
    NSMutableDictionary *imageDownloadsInProgress;
    NSArray* allThumbs;
}
@property (nonatomic, retain) NSMutableDictionary *imageDownloadsInProgress;

- (void)appImageDidLoad:(NSIndexPath *)indexPath;
@end

in .m part

- (void)viewDidLoad {
     self.imageDownloadsInProgress = [NSMutableDictionary dictionary];
     .....

}

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

NSFileManager* fm = [NSFileManager defaultManager];
    NSString* galleryDocumentPath =  [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0] stringByAppendingPathComponent:[NSString stringWithFormat:@"Gallery/%@/images/thumb.jpg",[someObj.title stringByReplacingOccurrencesOfString:@" " withString:@"_" ]]];
//this above line is just make a seperate folder for each object and store thumbs of that object in that folder ... so make it unique some how
    if (![fm fileExistsAtPath:galleryDocumentPath]) 
    {
        LoadGalleryThumbOp *galleryThumbDownloader = [imageDownloadsInProgress objectForKey:indexPath];
        if (galleryThumbDownloader != nil && galleryThumbDownloader.imageDownload == NO)
        {
            [cell.activityIndicator stopAnimating];
            cell.albumCoverImageView.image = [UIImage imageNamed:@"no_thumb.png"];
        }
        else {
            [cell.activityIndicator startAnimating];                
        }
        [self startIconDownload:temp forIndexPath:indexPath andYear:[NSString stringWithFormat:@"%d",selectedYear]];
    }
    else
    {
        [cell.activityIndicator stopAnimating];
        cell.albumCoverImageView.image = [UIImage imageWithContentsOfFile:galleryDocumentPath];
    }
    return cell ;
}

//The following method see if there is already so downloader that is downloading same image then it simply do nothing else it create a downloader and start it     
- (void)startIconDownload:(Gallery *)gallery forIndexPath:(NSIndexPath *)indexPath  andYear:(NSString*)yr
{
    LoadGalleryThumbOp *galleryThumbDownloader = [imageDownloadsInProgress objectForKey:indexPath];
    if (galleryThumbDownloader == nil) 
    {
        NSString* documentsPath =    [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];
        NSString* nameWithoutSpace = [gallery.title stringByReplacingOccurrencesOfString:@" " withString:@"_" ];
        NSString* galleryDocumentPath = [documentsPath stringByAppendingPathComponent:[NSString stringWithFormat:@"Gallery//%@",nameWithoutSpace]];

        galleryThumbDownloader = [[LoadGalleryThumbOp alloc] init];
        galleryThumbDownloader.documentPath = galleryDocumentPath;
        galleryThumbDownloader.indexPathInTableView = indexPath;
        galleryThumbDownloader.delegate = self;
        [imageDownloadsInProgress setObject:galleryThumbDownloader forKey:indexPath];
        [galleryThumbDownloader startDownload];
        [galleryThumbDownloader release];   
    }
    else if(galleryThumbDownloader.imageDownload == NO)
    {
        if (albumListTableView.dragging || albumListTableView.decelerating) {
            [galleryThumbDownloader startDownload];
        }
    }
}

finally the method which is called when a particular image is downloaded

- (void)appImageDidLoad:(NSIndexPath *)indexPath
{
    CustomCellPhotoGalary* cell = (CustomCellPhotoGalary*)[albumListTableView cellForRowAtIndexPath:indexPath];
    LoadGalleryThumbOp *galleryThumbDownloader = [imageDownloadsInProgress objectForKey:indexPath];

    if (galleryThumbDownloader != nil)
    {
        if (galleryThumbDownloader.imageDownload) 
        {
            [cell.activityIndicator stopAnimating];
            NSString* documentsPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];                                
                    NSString* nameWithoutSpace = [temp.title stringByReplacingOccurrencesOfString:@" " withString:@"_" ];
            NSString* galleryDocumentPath = [documentsPath stringByAppendingPathComponent:[NSString stringWithFormat:@"Gallery/%@",nameWithoutSpace]];
            cell.albumCoverImageView.image = [UIImage imageWithContentsOfFile:galleryDocumentPath];
            //galleryThumbDownloader = nil;
        }
        else {
            [cell.activityIndicator stopAnimating];
            cell.albumCoverImageView.image = [UIImage imageNamed:@"no_thumb.png"];
            [self startIconDownload:temp forIndexPath:indexPath andYear:[NSString stringWithFormat:@"%d",selectedYear]];
    }
        [albumListTableView reloadData];
    }
}

woooh…..! thats a lot of code for one example
Note : I cut out so many line so this code may not work for u directly {there may be so many errors .. }, But i hope you get the main idea behind the scene … 🙂