Reload constraint or update height in self-sizing tableview cell after image is downloaded

Question

I show 1 image in my cell and height need to be changed according to aspect ratio. But if I don't reload table, constraint is not changed and thus cell height too. If I use 'reloadData' or reload particular row, it is okay but scrolling performance is affected. One of the ways is to download all images first but might not be good I guess. How shall I do?

Media *media = self.post.medias[0];
NSString *imgUrlStr = media.thumbnailUrl;
[self.ivMain allowTapWithMedia:self.post.medias[0]];

UIImage* displayImage = [myCache imageFromDiskCacheForKey:imgUrlStr];

if (displayImage) {
    @try {

        [self.ivMain setImage:displayImage];
        CGFloat ivHeight = (displayImage.size.height/displayImage.size.width) * CGRectGetWidth(self.ivMain.frame);

        if (roundf(ivHeight) != roundf(self.verticalConstraintIvMain.constant))
            [self.verticalConstraintIvMain setConstant:ivHeight];

    } @catch (NSException *exception) {

    }
}
else {
    [self.ivMain setImageWithURL:[NSURL URLWithString:imgUrlStr] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

        //image width > iv width
        //image height .. ?

        dispatch_async(dispatch_get_main_queue(), ^{
            CGFloat ivHeight = (image.size.height/image.size.width) * CGRectGetWidth(self.ivMain.frame);
            if (roundf(self.verticalConstraintIvMain.constant) != roundf(ivHeight)) {

                // [self.verticalConstraintIvMain setConstant:ivHeight];

                id view = [self superview];

                while (view && [view isKindOfClass:[UITableView class]] == NO) {
                    view = [view superview];
                }

                UITableView *tableView = (UITableView *)view;
                [tableView reloadData];
                // [tableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:self.tag inSection:0]] withRowAnimation:UITableViewRowAnimationNone];
            }
        });
    } usingActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];


}

Answer 1

The known solution is to not reload rows while the user is scrolling. It's impossible to have major layout operations and smooth scrolling simultaneously.

So when the async image-download call comes back, detect if the user is scrolling by looking at the table view properties (inherited from UIScrollView) isDragging and isDecelerating. If the user is scrolling, instead put the 'index path to reload' into some storage. A mutable array property on whatever is the table view data source/delegate would be best, for reasons below. When the user stops scrolling, reload the paths and clear the storage.

You can do the last step by implementing the UIScrollViewDelegate method -scrollViewDidEndDecelerating:. The table view's delegate is also the scroll view's delegate. It can have a nice effect in practice to see multiple images appear when scrolling stops.