解决tableView/collectionView Cell 使用SDWebImage 时闪烁

解决tableView/collectionView Cell 使用SDWebImage 时闪烁

问题分析

tableView/collectionView Cell 使用SDWebImage 加载cell 中的网络图片时，会有闪烁发生。
经分析原因，是由于 cell 的重用机制，导致cell 在 Appear 的时候，首先显示的是原来的图片，然后再执行 SDWebImage 的加载图片。
SDWebImage 无论加载缓存图片或者网络图片都需要一定时间，但这个时间又很短，所以会出现闪烁的情况。
那么，我的方案就是针对这方面去解决问题的。

解决方案

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CommonTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.imageV.image = [UIImage imageNamed:@"placeHolder"];
    [cell.imageV sd_setImageWithURL:[NSURL URLWithString:@"indexPathImageUrl"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        cell.imageV.alpha = 0.0;
        [UIView transitionWithView:cell.imageV
                          duration:1.0
                           options:UIViewAnimationOptionTransitionCrossDissolve
                        animations:^{
                            [cell.imageV setImage:image];
                            cell.imageV.alpha = 1.0;
                        } completion:NULL];
    }];
    return cell;
}

这里主要是这两行代码：

• 1） cell.imageV.image = [UIImage imageNamed:@"placeHolder"];
  在cell 重用的时候，首先使用 placeHolder 直接替换掉原来的图片，形成占位图（这里直接用空图片也是可以的，比如nil，@""）。等于直接清除cell 的重用图，这样就不会出现原图了。

• 2）cell TransitionCrossDissolve

[UIView transitionWithView:cell.imageV
                          duration:1.0
                           options:UIViewAnimationOptionTransitionCrossDissolve
                        animations:^{
                            [cell.imageV setImage:image];
                            cell.imageV.alpha = 1.0;
                        } completion:NULL];

TransitionCrossDissolve 就是系统默认的转场动画。让新图片替换原来的图片的过程中出现的是平滑的动画。这样就不是闪烁一下，而是整体的动画替换，这样效果就会好很多。
当然 duration 时间可以自定义的调整，我实际用的是0.35.