UIImage replaces with another UIImage not Smooth

Question

I'm working on a project where I'm rendering Images from UIWebView and then showing into a tableView with custom UITableViewCell . When UITableView presents first time...there is no rendered images to display, so I'm displaying a default image(ie icon-thumb.png) in the cell. Once Images rendered I'm reloading UITableView . I'm doing this as below…

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
        NSString *reuseIdentifier = @"CustomTableViewID";             CustomTableViewCell  *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
        if (cell == nil)
        {
            cell = (CustomTableViewCell *)[[[NSBundle mainBundle] loadNibNamed:@"CustomTableViewCell" owner:nil options:nil] objectAtIndex:0];
        }

        CGRect mainImageViewFrame = CGRectMake(9, 31, 202, 171);
        cell.mainImageView.frame = mainImageViewFrame;

        [cell setBackgroundColor:[UIColor clearColor]];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        cell.transform = CGAffineTransformMakeRotation(M_PI * 0.5);

        cell.slideNumberLbl.textColor = [UIColor whiteColor];
        cell.slideNumberLbl.backgroundColor = [UIColor grayColor];
        cell.slideNumberLbl.layer.cornerRadius = 5.0;
        cell.slideNumberLbl.alpha = 0.5;
        [cell.slideNumberLbl setTextAlignment:NSTextAlignmentCenter];
        cell.slideNumberLbl.text = [NSString stringWithFormat:@"%d",indexPath.row+1];

        [cell.mainImageView setBackgroundColor:[UIColor clearColor]];

        [cell.reflectionImageView setContentMode:UIViewContentModeScaleToFill];
        cell.reflectionImageView.alpha = 0.15;

        NSFileManager *manager = [NSFileManager defaultManager];
        NSString *thumbImagepath = [self.storageDirPath stringByAppendingPathComponent:[NSString stringWithFormat:@"%d_thumb%@",indexPath.row, Image_Extension_JPG]];

        if([manager fileExistsAtPath:thumbImagepath]){
            dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
                __block UIImage *img = [UIImage imageWithContentsOfFile:thumbImagepath];
                dispatch_async(dispatch_get_main_queue(), ^{

                    CGRect mainImageViewFrame = CGRectMake(9, 31, 202, 171);
                    cell.mainImageView.frame = mainImageViewFrame;
                    cell.mainImageView.image = img;
                    [cell.mainImageView setContentMode:UIViewContentModeScaleAspectFit];
                    img = nil;
                    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
                        __block UIImage *reflectionImg = [self reflectedImage:cell.mainImageView withHeight:cell.mainImageView.frame.size.height];
                        dispatch_async(dispatch_get_main_queue(), ^{
                            cell.reflectionImageView.image = reflectionImg;
                            reflectionImg = nil;
                        });
                    });
                });
            });
        }
        else{
            CGRect mainImageViewFrame = CGRectMake(9, 31, 202, 171);
            mainImageViewFrame.origin.y = mainImageViewFrame.origin.y+10;
            mainImageViewFrame.size.height = mainImageViewFrame.size.height-20;
            cell.mainImageView.frame = mainImageViewFrame;

            [cell.mainImageView setContentMode:UIViewContentModeCenter];
            [cell.mainImageView setBackgroundColor:[UIColor whiteColor]];
            cell.mainImageView.image = [UIImage imageNamed:@"icon-thumb.png"];
            [cell.reflectionImageView setBackgroundColor:[UIColor whiteColor]];
            [cell.reflectionImageView setImage:[UIImage imageNamed:@"reflection_temp.png"]];
        }

        return cell;
    }

The problem is, when the default image (ie icon-thumb.png) gets replace with the real image once real images rendering done..the replacement is not smooth, the Image replaces with flash/or all of sudden but it need to be very smooth ...any suggestion, thanks in advance.

Answer 1

It may be stupid answer but didn't you try to use an animation for this ?

like this :

        [UIView animateWithDuration:duration animations:^{
            } completion:^(BOOL finished) {
            }
        }];

Answer 2

you can use CATransition for example

 CATransition *transition = [CATransition animation];
    transition.duration = 0.2;//duration
    transition.type = kCATransitionFade; //choose your animation
    [yourCell.layer addAnimation:transition forKey:nil];
    [yourCell.mainimageview setImage:img];

Answer 3

I would do something like the following :

[UIView transitionWithView:cell.mainImageView
                  duration:0.2f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    cell.mainImageView.image = [UIImage imageNamed:@"icon-thumb.png"];
                } completion:nil];

I find that approach slightly more elegant.