iOS 10如何优雅地异步加载图片

newYear.png

前言：在 APP 开发中时常需要展示大量的图片，然而加载显示照片是不仅消耗APP性能，同时在tableView的cell中上下滑动加载图片也是一项非常耗时和耗流量的动作。

本文主要分两个部分：

1.尝试自己实现异步加载图片

2.如何优雅异步加载图片

尝试自己实现异步加载图片

首先创建一个UIImageView的category,先将 UIImageView 的 image 设置为placeholder，然后发出网络请求，获取图片；如果图片获取成功就在主线程中将UIImageView的image替换成请求成功的照片。

#import 

@interface UIImageView (YY)

- (void)yy_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder ;

@end

#import "UIImageView+YY.h"
@implementation UIImageView (YY)

- (void)yy_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder
{
    self.image = placeholder;
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        NSData *data = [NSData dataWithContentsOfURL:url];
        NSLog(@"data:%@",data);
        if (data) {
            dispatch_async(dispatch_get_main_queue(), ^{
                UIImage *image = [UIImage imageWithData:data];
                [self setImage:image];
            });
        }
    });
}
@end

通过上面自己的实现方式，对于UIImageView可以加载并显示图片的。但是如果UIImageView设置了多次加载图片，会出现怎样的结果呢？

#import "ViewController.h"
#import "UIImageView+YY.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSLog(@"沙盒：%@",NSHomeDirectory());
    
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(200, 200, 100, 100)];
    [self.view addSubview:imageView];
    [imageView yy_setImageWithURL:[NSURL URLWithString:@"https://image.png"] placeholderImage:[UIImage imageNamed:@"景区列表Grid_03"]];
    [imageView yy_setImageWithURL:[NSURL URLWithString:@"https://image.png"] placeholderImage:[UIImage imageNamed:@"景区列表Grid_03"]];
    [imageView yy_setImageWithURL:[NSURL URLWithString:@"https://image.png"] placeholderImage:[UIImage imageNamed:@"景区列表Grid_03"]];
}
@end

当多次为同一个UIImageView设置image的时候，根据上面的情况，我们最终需要显示的会是image3，但是这时候UIImageView会去开启三个下载任务，但由于他们关联的都会是同一个UIImageView，就会出现3个任务的回调都给同一个UIImageView，这样就会出现相同数据来刷新UI了。既不能有良好的用户体验，也浪费用户的流量。接下来我们就尝试解决这个问题。

尝试自己实现异步加载图片

大概实现思路：这次异步加载图片我们使用的是NSOperation，而不是GCD。

然后需要两个字典类型的数据：一个（ images）是用于记录已经下载了的图片 避免再次下载, URL 为 key，另一个（operations）是用于记录用于下载的图片, URL 为 key。

在加载图片之前，我们首先查找images中是否在内存中已经存在即将需要下载的图片，如果有，则直接通过键值对的方式将图片取出；当图片不存在 于内存中，我们再去沙盒中查找是否已经保存，当前面两中方式都无法查找需要的图片的时候，这才正式开始通过网络请求异步加载图片。值得注意的是，在我们通过网络异步加载图片的时候，我们需要通过operations来判断是不是已经存在。

定义NSOperationQueue，用于存放下载操作：

@property (nonatomic,strong) NSOperationQueue    *operationQueue;

定义所需要的两个字典类型的变量：

//用于记录已经下载了的图片 避免再次下载 URL 为 key
@property (nonatomic,strong) NSMutableDictionary *images;
//用于记录用于下载的图片 URL 为 key
@property (nonatomic,strong) NSMutableDictionary *operations;

接下来需要去判断内存和沙盒中是否已经存在需要下载的图片：

UIImage *imageTmp = self.images[url];//UIImage *imageCache = [self.images valueForKey:(NSString *)url]; && [self.images objectForKey:(NSString *)url];
    if (imageTmp) {
        completeBlock(imageTmp);
        return;
    }
    //沙盒
    NSString *imagePath = imageFile(url);
    NSData *imageCache = [NSData dataWithContentsOfFile:imagePath];
    if (imageCache) {
        UIImage *image = [UIImage imageWithData:imageCache];
        completeBlock(image);
        return;
    }

如果内存和沙盒中都没有需要的照片，那么即将进入网路请求，在进行网络请求的时候，先判断NSOperationQueue中是否已经存在下载操作：

[self.operations enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([key isEqualToString:(NSString *)url]) {
            //该URL 正在下载  --->已经取消正在下载的 然后重新下载（还是保持正在下载的 暂停即将要下载的 ）
            return;
        }
    }];

如果上面的所有情况都没有，那么久需要进行网络请求加载图片：

//该 URL 没有在下载队列中 就将该 URL 加入下载队列
    __weak typeof(self) weakself = self;
    NSBlockOperation *operation = [NSBlockOperation blockOperationWithBlock:^{
        __strong typeof(weakself) strongSelf = weakself;
        NSData *data = [NSData dataWithContentsOfURL:url];
        if (data) {
            UIImage *image = [UIImage imageWithData:data];
            if (strongSelf) {
                self.images[url] = image;
            }
            //将下载好的图片存放于沙盒中
            NSData* ImageData = UIImagePNGRepresentation(image);
            [ImageData writeToFile:imageFile(url) atomically:YES];
            
            [[NSOperationQueue mainQueue]addOperationWithBlock:^{
                if (strongSelf) {
                    [self.operations removeObjectForKey:url];
                }
                completeBlock(image);//更新 UI 要回到主线程
            }];
        }
    }];
    
    self.operations[url] = operation;
    [self.operationQueue addOperation:operation];

以上大概讲述了怎么去异步下载图片，但是在真正的项目中并不能发挥什么作用。因为强大的开源项目SDWebImage已经很优雅有效地解决了这些问题。以上是实现思路也是参考了SDWebImage，当初步看了以上的实现思路，再去看SDWebImage的开源代码，思路也会清晰容易一些。SDWebImage在代码细节和思路上的实现，非常值得我们去学习。

总结：只要代码思维逻辑实现得好，缓存实现得妥当，肯定不会卡，面对大量图片显示的APP，既能优化用户的体验，也能省流量。即使手机不能上网，打开app时依然显示数据和图片，保证用户体验。