Load images into custom table view cell asynchronously

Question

Currently, I am developing an app in which I have fetch Facebook album photo & display it as gallery view asynchronously using Table view & put images on button of table view cell using below code:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSLog(@"particulars..:%d",[particular count]);
    int count=self.particular.count%3;

    if(count==0)
    {
        return self.particular.count/3;
    }
    else
    {
        return (self.particular.count/3) +1;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell1";
    CustomTableViewCell *cell = (CustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
     if (cell == nil)
        {
            [[NSBundle mainBundle] loadNibNamed:@"CustomTableViewCell" owner:self options:nil];
            cell = customcell;
        }


    UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

        dispatch_async(dispatch_get_global_queue(0,0), ^{
            NSString *buttonurl=[self.particular objectAtIndex:((indexPath.row)*3)+0];
            NSData * data = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: buttonurl]];
            if ( data == nil )
                return;
            dispatch_async(dispatch_get_main_queue(), ^{


                UIImage *image = [UIImage imageWithData:data];
                cell.accessoryType = UITableViewCellAccessoryNone;
                cell.selectionStyle = UITableViewCellSelectionStyleNone;
                cell.backgroundColor=[UIColor clearColor];
                [cell.first setBackgroundImage:image forState:UIControlStateNormal] ;
                [cell.first addTarget:self action:@selector(original:) forControlEvents:UIControlEventTouchUpInside];
                [cell.first setContentMode:UIViewContentModeCenter] ;
                cell.first.layer.cornerRadius = 10.0;
                cell.first.layer.borderColor = [[UIColor grayColor]CGColor];
                cell.first.layer.borderWidth = 1.0f;
                cell.first.backgroundColor=[UIColor clearColor];
                cell.first.tag = ((indexPath.row)*3)+1 ;
                [spinner stopAnimating];
            });
            [data release];
        });

        if(((indexPath.row)*3)+3<[particular count])
        {
            UIActivityIndicatorView *spinner2 = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
            UIActivityIndicatorView *spinner3 = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
            //spinner2.backgroundColor=[UIColor blackColor];
            CGRect frame= cell.second.frame;
            spinner2.frame=frame;
            //spinner2.frame=CGRectMake(112, y, 106, 106);
            spinner2.hidesWhenStopped = YES;
            [cell.second addSubview:spinner2];
            [spinner2 startAnimating];

            CGRect frame2= cell.third.frame;
            spinner3.frame=frame2;
            spinner3.hidesWhenStopped = YES;
            [cell.third addSubview:spinner3];
            [spinner3 startAnimating];

            dispatch_async(dispatch_get_global_queue(0,0), ^
            {
                NSString *buttonurl=[self.particular objectAtIndex:((indexPath.row)*3)+1];
                NSData * data = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: buttonurl]];

                NSString *buttonurl1=[self.particular objectAtIndex:((indexPath.row)*3)+2];
                NSData * data1 = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: buttonurl1]];
                if ( data == nil )
                    return;
                dispatch_async(dispatch_get_main_queue(), ^
                {
                    UIImage *image = [UIImage imageWithData:data];
                    UIImage *image1 = [UIImage imageWithData:data1];

                    [cell.second setBackgroundImage:image forState:UIControlStateNormal] ;
                    [cell.second addTarget:self action:@selector(original:) forControlEvents:UIControlEventTouchUpInside];
                    [cell.second setContentMode:UIViewContentModeCenter] ;
                    cell.second.layer.cornerRadius = 10.0;
                    cell.second.layer.borderColor = [[UIColor grayColor]CGColor];
                    cell.second.layer.borderWidth = 1.0f;
                    cell.second.backgroundColor=[UIColor clearColor];
                    cell.second.tag = ((indexPath.row)*3)+2 ;
                    NSLog(@"cell.second.tag:%d",cell.second.tag);

                    [cell.third setBackgroundImage:image1 forState:UIControlStateNormal] ;
                    [cell.third addTarget:self action:@selector(original:) forControlEvents:UIControlEventTouchUpInside];
                    [cell.third setContentMode:UIViewContentModeCenter] ;
                    cell.third.layer.cornerRadius = 10.0;
                    cell.third.layer.borderColor = [[UIColor grayColor]CGColor];
                    cell.third.layer.borderWidth = 1.0f;

                    cell.third.backgroundColor=[UIColor clearColor];
                    cell.third.tag = ((indexPath.row)*3)+3 ;
                    NSLog(@"cell.third.tag:%d",cell.third.tag);
                    [spinner2 stopAnimating];
                    [spinner3 stopAnimating];

                });
                [data release];
            });


        }
        else if(((indexPath.row)*3)+2<[particular count])
        {
            UIActivityIndicatorView *spinner2 = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
            CGRect frame1 = CGRectMake(120, y, 106, 107);
            spinner2.frame=frame1;
            spinner2.hidesWhenStopped = YES;
            [cell.second addSubview:spinner2];
            [spinner2 startAnimating];
            dispatch_async(dispatch_get_global_queue(0,0), ^
            {
                NSString *buttonurl=[self.particular objectAtIndex:((indexPath.row)*3)+1];
                NSData * data = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: buttonurl]];
                if ( data == nil )
                    return;
                dispatch_async(dispatch_get_main_queue(), ^
                {
                    UIImage *image = [UIImage imageWithData:data];
                    [cell.second setBackgroundImage:image forState:UIControlStateNormal] ;
                    [cell.second addTarget:self action:@selector(original:) forControlEvents:UIControlEventTouchUpInside];
                    [cell.second setContentMode:UIViewContentModeCenter] ;
                    cell.second.layer.cornerRadius = 10.0;
                    cell.second.layer.borderColor = [[UIColor grayColor]CGColor];
                    cell.second.layer.borderWidth = 1.0f;
                    cell.second.backgroundColor=[UIColor clearColor];
                    cell.second.tag = ((indexPath.row)*3)+2 ;
                    NSLog(@"cell.second.tag:%d",cell.second.tag);
                    [spinner2 stopAnimating];

                });
                [data release];
            });         
        }
        else
        {
            cell.second.hidden = YES;
            cell.third.hidden = YES;
        }
        y=y+106;
        return cell;
    }

This code is working fine for me but the problem is that when images load into button contain by table view cell then if we scroll down then it slowly show images but after that when we scroll up to see previously load images then images disappear & it again load from starting & take times.So please tell where i am doing mistake in code or how can I solve this?

Answer 1

Here is a solution with out using dispatch_async.If you are getting the URL from services than use this method NSObject where service is called

-(void)loadProfilePicWithURL:(NSString *)strUrl  tagV:(NSInteger)tagV{
isProfilePicLoaded = NO;
//set media tag as indexPath.row

//call this method from cellForRowAtIndexpPath
//Pass the image URL --> strProfilePicURL
//Load the image in bg and set to imgProfilePic
//After loaded, send a notification with tag to table view to update the cell


NSData *data=[NSData dataWithContentsOfURL:[NSURL URLWithString:strUrl]];
imgProfilePic=[UIImage imageWithData:data];

isProfilePicLoaded = YES;
[[NSNotificationCenter defaultCenter] postNotificationName:@"reloadTableViewCell" object:[NSNumber numberWithInteger:tagV]];
}

Call this method from cellForRowAtIndexPath

[self performSelectorInBackground:@selector(loadPic:) withObject:[NSNumber numberWithInteger:indexPath.row]];

implement

-(void)loadPic: (id )indexPath{
NSInteger conV=[indexPath integerValue];

NSObject *object=[Array objectAtIndex:conV];
[object loadProfilePicWithURL:object.url tagV:conV];

}

Add Observer for the notification in NSObject

-(void)reloadTableViewCell:(NSNotification *)note{
NSInteger mediaTag = [[note object] integerValue];

[self reloadCellImage:mediaTag];

}

Re-load the particular cell in the table.

-(void)reloadCellImage:(NSInteger)row{
NSObject *object = [self.receivedArray objectAtIndex:row];
NSIndexPath* rowToReload = [NSIndexPath indexPathForRow:row inSection:0];
customCell *cell = (customCell *)[self.tableView cellForRowAtIndexPath:rowToReload];
[cell.imgVw setImage:object.image];}

Answer 2

I'd suggest you to use this AsyncImageView. I've used it and it work wonders. To call this API:

ASyncImage *img_EventImag = alloc with frame;
NSURL *url = yourPhotoPath;
[img_EventImage loadImageFromURL:photoPath];
[self.view addSubView:img_EventImage]; // In your case you'll add in your TableViewCell.

It's same as using UIImageView. Easy and it does most of the things for you. AsyncImageView includes both a simple category on UIImageView for loading and displaying images asynchronously on iOS so that they do not lock up the UI, and a UIImageView subclass for more advanced features. AsyncImageView works with URLs so it can be used with either local or remote files.

Loaded/downloaded images are cached in memory and are automatically cleaned up in the event of a memory warning. The AsyncImageView operates independently of the UIImage cache, but by default any images located in the root of the application bundle will be stored in the UIImage cache instead, avoiding any duplication of cached images.

The library can also be used to load and cache images independently of a UIImageView as it provides direct access to the underlying loading and caching classes.

Answer 3

It is working the way it should do. When you scroll a table view is like if the cells that disappeared have been released and when you scroll back the cell are dequeued. So, you should use a solution for caching the images so that they don't need to be loaded again, such as EGOImageView (here), AsyncImageView, SDWebImage etc.

Answer 4

There are some custom libraries which do the job very well for you

1. AsynchImageView
2. SDWebImage
3. AFNetworking Image Extension (if you are using AF )