UITableView async image loading - not laying out until scroll - ios

Question

My asynchronously loading images aren't loading in my initial cells when the tableView first loads. They only show after I scroll the cells off-screen and them scroll them on-screen again. So I've read a number of S.O. questions on this issue, and I feel like I'm doing everything right. There's a lot going on in this method as it's populating a UIView with a number of avatar images.
I'm retrieving the images in a background thread, and then when I'm setting the images I go back to the main thread. And then I'm calling this:
[correctCell setNeedsLayout];
It appears to me that I'm doing everything correct but it seems like setNeedsLayout just isn't getting called back on the main thread.
Here's the method which I'm calling from tableView:cellForRowAtIndexPath::
- (void) setPeopleAvatars:(NSArray*)people cell:(WSExploreTableViewCell*)cell indexPath:(NSIndexPath *) indexPath{
[cell clearPeopleAvatars];
// Dimensions
CGFloat maxAvatars = cell.peopleView.frame.size.width / (kWSExploreCellPeopleAvatarDim + kWSExploreCellPeopleAvatarPadding);
CGFloat peopleAvatarX = cell.peopleView.frame.size.width - kWSExploreCellConvoBubblePadding - kWSExploreCellPeopleAvatarDim;
CGFloat peopleAvatarY = cell.peopleView.frame.size.height/2 - kWSExploreCellPeopleAvatarDim/2;
__block CGFloat lastAvatarX;
__block NSUInteger numAvatars = 0;
// First set the convo bubble image
cell.convoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:kWSExploreCellConvoBubbleIcon]];
cell.convoImageView.frame = CGRectMake(cell.peopleView.frame.size.width - 1.0f - cell.convoImageView.frame.size.width,
cell.peopleView.frame.size.height/2 - cell.convoImageView.frame.size.height/2,
cell.convoImageView.frame.size.width,
cell.convoImageView.frame.size.height);
[cell.peopleView addSubview:cell.convoImageView];
cell.convoImageView.hidden = YES;
if (people.count == 0) {
cell.convoImageView.hidden = NO;
}
[people enumerateObjectsUsingBlock:^(id person, NSUInteger idx, BOOL *stop) {
// Stop at maxAvatars
if (idx >= maxAvatars) {
*stop = YES;
return;
}
[WSDatabaseManager getSmallProfilePic:(PFUser*)person callback:^(UIImage *image, NSError *error) {
if (!error) {
dispatch_async(dispatch_get_main_queue(), ^{
WSExploreTableViewCell * correctCell = (WSExploreTableViewCell*)[self.tableView cellForRowAtIndexPath:indexPath];
WSProfileImageView* avatarImageView = [[WSProfileImageView alloc] initWithImage:image croppedToCircle:YES diameter:kWSExploreCellPosterAvatarDim];
[avatarImageView setBackgroundColor:[UIColor clearColor]];
[avatarImageView setOpaque:NO];
[correctCell.peopleView addSubview:avatarImageView];
// Layout
CGFloat totalAvatarWidth = kWSExploreCellPeopleAvatarDim + kWSExploreCellPeopleAvatarPadding;
lastAvatarX = peopleAvatarX - (numAvatars * totalAvatarWidth);
[avatarImageView setFrame:CGRectMake(lastAvatarX, peopleAvatarY, kWSExploreCellPeopleAvatarDim, kWSExploreCellPeopleAvatarDim)];
// Move the convoImageView
CGRect convoFrame = correctCell.convoImageView.frame;
convoFrame.origin.x = convoFrame.origin.x - totalAvatarWidth;
correctCell.convoImageView.frame = convoFrame;
correctCell.convoImageView.hidden = NO;
// Update Counter
numAvatars++;
[correctCell setNeedsLayout];
});
}
}];
}];
}

Answer 1

As you probably know, the cell gets redrawn when it first appears on screen. That's why you are seeing the cell update when they reappear. You can try force refreshing the cell once you are done updating it.
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

Answer 2

Try SDWebImage
It will take care of loading your images when they are retrieved and will cache also. All you have to do is import UIImageView+WebCache.h :
[convoImageView setImageWithURL:YOUR_IMAGE_URL_HERE
placeholderImage:[UIImage imageNamed:#"placeholder.png"]
completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
//do something in completion block
}];