table view with images which are loaded from server in iphone - objective-c

Question

Hi I am developing IOS application. My application contains table view with image as part of my table. I am loading my image from server. It is working fine. But problem with my table view is once I scroll my table view it is start flickering my images. That mean it showing wrong image for some time after some time it shows right images. this behaviour continues when I scroll. Is there any need to explicitly call any object to nil or release some cell object or holding some cell objects. My cell for table view looks like :
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = #"MediaContentCell";
MediaContentCell *cell = (MediaContentCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) {
cell = (MediaContentCell *)[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
VideoDataModel *videoData = [_mediaContentArray objectAtIndex:indexPath.row];
cell.mediaTitle.text = videoData.title;
cell.mediaSubtitle.text = videoData.shortdescription;
NSMutableArray *posters = videoData.poster;
dispatch_queue_t myQueue = dispatch_queue_create("ImageQue",NULL);
dispatch_async(myQueue, ^
{
UIImage *image;
if(!posters)
{
image = [UIImage imageNamed:#"dummyprog_large1.png"];
}
else
{
for(int index = 0 ; index < posters.count; index++)
{
PosterDataModel *posterData = [posters objectAtIndex:index];
if([posterData.postertype isEqualToString:POSTER_TYPE_LANDSCAPE])
{
image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:posterData.posterurl]]];
break;
}
}
}
dispatch_async(dispatch_get_main_queue(), ^
{
cell.mediaPicture.image = image;
});
});
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
return cell;
}
Is there any one can help me for this? Need some help Thank you.

Answer 1

use - SDWebImage
[cell.imageView sd_cancelCurrentImageLoad];
[cell.imageView setImageWithURL:[NSURL URLWithString:#"http://www.domain.com/path/to/image.jpg"]
placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
I am using this framework and Its working fine for me.

Answer 2

cell.imageView.image = [UIImage imageWithData:yourDefaultImgUrl];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSData *imageData = [NSData dataWithContentsOfURL:yourServerImageUrl];
if (imageData){
dispatch_async(dispatch_get_main_queue(), ^{
UITableViewCell *updateCell = [tableView cellForRowAtIndexPath:indexPath];
if (updateCell)
updateCell.imageView.image = [UIImage imageWithData:imageData];
});
}
});
It helps you :)

Answer 3

It's the reuse mechanism that causes your problem
Say, if your table view has 1000 cells to display, and 5 cells are visible on the screen at a time, iOS will only create 6 UITableViewCell objects in the memory.
In your code, the image will be loaded asynchronously from the network, and then set to the [mediaPicture] belonging to the cell at an index path, but when you scroll the table view, because of the reuse mechanism, the [cell.mediaPicture] might not be correctly related to the index path anymore, and the downloaded image will be wrongly set.
You can take a look at this question about the reuse mechanism:
UITableViewCell - Understanding "reuseable"
And Amol's answer is exactly the solution for your case.