前言：在 APP 開發(fā)中時常需要展示大量的圖片，然而加載顯示照片是不僅消耗APP性能镇眷，同時在tableView的cell中上下滑動加載圖片也是一項非常耗時和耗流量的動作。
本文主要分兩個部分：
1.嘗試自己實現(xiàn)異步加載圖片
2.如何優(yōu)雅異步加載圖片
嘗試自己實現(xiàn)異步加載圖片
首先創(chuàng)建一個UIImageView的category,先將 UIImageView 的 image 設(shè)置為placeholder戒努，然后發(fā)出網(wǎng)絡(luò)請求剔交，獲取圖片肆饶；如果圖片獲取成功就在主線程中將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
通過上面自己的實現(xiàn)方式岖常，對于UIImageView可以加載并顯示圖片的驯镊。但是如果UIImageView設(shè)置了多次加載圖片，會出現(xiàn)怎樣的結(jié)果呢竭鞍？
#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:@"景區(qū)列表Grid_03"]];
[imageView yy_setImageWithURL:[NSURL URLWithString:@"https://image.png"] placeholderImage:[UIImage imageNamed:@"景區(qū)列表Grid_03"]];
[imageView yy_setImageWithURL:[NSURL URLWithString:@"https://image.png"] placeholderImage:[UIImage imageNamed:@"景區(qū)列表Grid_03"]];
}
@end
當(dāng)多次為同一個UIImageView設(shè)置image的時候板惑，根據(jù)上面的情況，我們最終需要顯示的會是image3偎快，但是這時候UIImageView會去開啟三個下載任務(wù)冯乘，但由于他們關(guān)聯(lián)的都會是同一個UIImageView，就會出現(xiàn)3個任務(wù)的回調(diào)都給同一個UIImageView晒夹，這樣就會出現(xiàn)相同數(shù)據(jù)來刷新UI了裆馒。既不能有良好的用戶體驗，也浪費用戶的流量丐怯。接下來我們就嘗試解決這個問題喷好。
嘗試自己實現(xiàn)異步加載圖片
大概實現(xiàn)思路：這次異步加載圖片我們使用的是NSOperation，而不是GCD读跷。
然后需要兩個字典類型的數(shù)據(jù)：一個（ images）是用于記錄已經(jīng)下載了的圖片 避免再次下載, URL 為 key梗搅，另一個（operations）是用于記錄用于下載的圖片, URL 為 key。
在加載圖片之前效览，我們首先查找images中是否在內(nèi)存中已經(jīng)存在即將需要下載的圖片无切，如果有，則直接通過鍵值對的方式將圖片取出丐枉；當(dāng)圖片不存在 于內(nèi)存中哆键，我們再去沙盒中查找是否已經(jīng)保存，當(dāng)前面兩中方式都無法查找需要的圖片的時候矛洞，這才正式開始通過網(wǎng)絡(luò)請求異步加載圖片洼哎。值得注意的是，在我們通過網(wǎng)絡(luò)異步加載圖片的時候沼本，我們需要通過operations來判斷是不是已經(jīng)存在噩峦。
定義NSOperationQueue，用于存放下載操作：
@property (nonatomic,strong) NSOperationQueue *operationQueue;
定義所需要的兩個字典類型的變量：
//用于記錄已經(jīng)下載了的圖片 避免再次下載 URL 為 key
@property (nonatomic,strong) NSMutableDictionary *images;
//用于記錄用于下載的圖片 URL 為 key
@property (nonatomic,strong) NSMutableDictionary *operations;
接下來需要去判斷內(nèi)存和沙盒中是否已經(jīng)存在需要下載的圖片：
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;
}
如果內(nèi)存和沙盒中都沒有需要的照片抽兆，那么即將進入網(wǎng)路請求识补，在進行網(wǎng)絡(luò)請求的時候，先判斷NSOperationQueue中是否已經(jīng)存在下載操作：
[self.operations enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([key isEqualToString:(NSString *)url]) {
//該URL 正在下載 --->已經(jīng)取消正在下載的 然后重新下載（還是保持正在下載的 暫停即將要下載的 ）
return;
}
}];
如果上面的所有情況都沒有辫红，那么久需要進行網(wǎng)絡(luò)請求加載圖片：
//該 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];
以上大概講述了怎么去異步下載圖片凭涂，但是在真正的項目中并不能發(fā)揮什么作用。因為強大的開源項目SDWebImage已經(jīng)很優(yōu)雅有效地解決了這些問題贴妻。以上是實現(xiàn)思路也是參考了SDWebImage切油，當(dāng)初步看了以上的實現(xiàn)思路，再去看SDWebImage的開源代碼名惩，思路也會清晰容易一些澎胡。SDWebImage在代碼細節(jié)和思路上的實現(xiàn)，非常值得我們?nèi)W(xué)習(xí)娩鹉。
總結(jié)：只要代碼思維邏輯實現(xiàn)得好攻谁，緩存實現(xiàn)得妥當(dāng)，肯定不會卡弯予，面對大量圖片顯示的APP戚宦，既能優(yōu)化用戶的體驗，也能省流量锈嫩。即使手機不能上網(wǎng)受楼，打開app時依然顯示數(shù)據(jù)和圖片，保證用戶體驗呼寸。
