Update tableView when images loaded asynchronously - ios

Question

I get images asynchronously with parse, and i insert them into an array with some other stuff.
I return this array to fill a tableView, and the rows has an UIImageView, but some images that i get asynchronously doest get loaded when i fill the table with the array in cellForRowAtIndexPath, so when i first look the tableView, i get the rows with an empty image in the cell, till i move the scroll in the tableView so cellForRowAtIndexPath is called again and those images i was set in the array are already loaded.
I get the images also if i do a IBAction with [self.tableView reloadData]; i get the images.
The problem is that i return the cell inmediatelly and the image is not loaded.
I'm using a custom TableViewCell.
I found something about "AsyncImageView" to load the image, but i dont know how.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//Get the game for the row
GameModel *game = [self.currentMatches objectAtIndex:indexPath.row]; //HERE i load the images
MatchCell *cell = [self.tableView dequeueReusableCellWithIdentifier:#"GameCell" forIndexPath:indexPath];
cell.userImage.image = game.avatarp1; //I set the image to the cell but isnt loaded yet
//If i do this WORKS but i get 2 times the same image (on the game and now) (its a function that i created, that seems is calling tableView or so when assigns the image to the cell, i dont understand why it works
[ParseModel getAvatarWithUser:game.p1 completionBlock:^(UIImage *avatar) {
cell.userImage.image = avatar;
}];

Answer 1

What if you set to nil the image when you get the dequeueReusableCell, and then let the block set the image?
Just change this:
cell.userImage.image = game.avatarp1;
For this:
cell.userImage.image = nil;
And then let this code works (I have understood by your answer that this works well)
[ParseModel getAvatarWithUser:game.p1 completionBlock:^(UIImage *avatar) {
cell.userImage.image = avatar;
}];
Hope it helps!

Answer 2

You can use "SDWebImage" as an alternative to "AsyncImageView" that you mentioned in your question. It is very easy to implement. I put here an example of my own code, where I download an image from a URL in a cell in the same way you are trying. (Change my "view" for your cell.userImage)
This method puts a temp image (placeholder and when the image is fully downloaded, it automaticlly changes (without any reload or scroll).
- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view
{
if (view == nil)
{
view = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 238.0f, 289.0f)] autorelease];
//here is where you put a placeholder and download in the background the image with an URL. Items is an array of URLs
[(UIImageView *)view setImageWithURL:[items objectAtIndex:index]
placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
view.contentMode = UIViewContentModeScaleAspectFit;
}
return view;
}
When you have added SDWebImage to your project, dont forget to add into your .m: #import < SDWebImage/UIImageView+WebCache.h >