前言：在 APP 开发中时常需要展示大量的图片，然而加载显示照片是不仅消耗APP性能，同时在tableView的cell中上下滑动加载图片也是一项非常耗时和耗流量的动作。
本文主要分两个部分：
1.尝试自己实现异步加载图片
2.如何优雅异步加载图片
尝试自己实现异步加载图片
首先创建一个UIImageView的category,先将 UIImageView 的 image 设置为placeholder，然后发出网络请求，获取图片；如果图片获取成功就在主线程中将UIImageView的image替换成请求成功的照片。
#import <UIKit/UIKit.h>
@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时依然显示数据和图片，保证用户体验。
