hosea_zhou ? http://www.reibang.com/p/dabc0c6d083e ?
SDWebImage作為目前最受歡迎的圖片下載第三方框架，使用率很高凡蚜。但是你真的會(huì)用嗎拳亿？本文接下來(lái)將通過(guò)例子分析如何合理使用SDWebImage嚎朽。
使用場(chǎng)景：自定義的UITableViewCell上有圖片需要顯示位他，要求網(wǎng)絡(luò)網(wǎng)絡(luò)狀態(tài)為WiFi時(shí)吧黄，顯示圖片高清圖部服；網(wǎng)絡(luò)狀態(tài)為蜂窩移動(dòng)網(wǎng)絡(luò)時(shí)，顯示圖片縮略圖拗慨。
由于要監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)廓八，在這里筆者推薦使用AFNetWorking。
在GitHub或者利用cocoaPod給項(xiàng)目導(dǎo)入第三方框架AFNetWorking赵抢。
在AppDelegate.m文件中的application:didFinishLaunchingWithOptions:方法中監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)剧蹂。
```
// AppDelegate.m 文件中
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// 監(jiān)控網(wǎng)絡(luò)狀態(tài)
[[AFNetworkReachabilityManager sharedManager] startMonitoring];
}
// 以下代碼在需要監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)的方法中使用
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
if (mgr.isReachableViaWiFi)? ? { // 在使用Wifi, 下載原圖
} else? ? { // 其他，下載小圖
}
}
```
- 這時(shí)就會(huì)有iOS學(xué)習(xí)者開(kāi)始抱怨：這不是很簡(jiǎn)單嗎烦却？于是三下五除二寫(xiě)完了以下代碼宠叼。
```
// 利用MVC，在設(shè)置cell的模型屬性時(shí)候其爵，下載圖片
- setItem:(CustomItem *)item
{
_item = item;
UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下載原圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else { // 其他冒冬，下載小圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
}
}
```
－此時(shí)伸蚯，確實(shí)能完成基本的按照當(dāng)前網(wǎng)絡(luò)狀態(tài)下載對(duì)應(yīng)的圖片，但是真實(shí)開(kāi)發(fā)中简烤，這樣其實(shí)是不合理的剂邮。以下是需要注意的細(xì)節(jié)：
SDWebImage會(huì)自動(dòng)幫助開(kāi)發(fā)者緩存圖片（包括內(nèi)存緩存，沙盒緩存）乐埠，所以我們需要設(shè)置用戶在WiFi環(huán)境下下載的高清圖抗斤，下次在蜂窩網(wǎng)絡(luò)狀態(tài)下打開(kāi)應(yīng)用也應(yīng)顯示高清圖，而不是去下載縮略圖丈咐。
許多應(yīng)用設(shè)置模塊帶有一個(gè)功能：移動(dòng)網(wǎng)絡(luò)環(huán)境下仍然顯示高清圖瑞眼。這個(gè)功能其實(shí)是將設(shè)置記錄在沙盒中，關(guān)于數(shù)據(jù)保存到本地棵逊，可以查看本人另一篇簡(jiǎn)書(shū)首頁(yè)文章
iOS本地?cái)?shù)據(jù)存取伤疙，看這里就夠了
當(dāng)用戶處于離線狀態(tài)時(shí)候，無(wú)法合理處理業(yè)務(wù)辆影。
－于是徒像，開(kāi)始加以改進(jìn)。為了讓讀者你更容易理解蛙讥，我先貼出偽代碼：
```
- setItem:(CustomItem *)item
{
_item = item;
if (緩存中有原圖)
{
self.imageView.image = 原圖;
} else
{
if (Wifi環(huán)境)
{
下載顯示原圖
} else if (手機(jī)自帶網(wǎng)絡(luò))
{
if (3G\4G環(huán)境下仍然下載原圖)
{
下載顯示原圖
} else
{
下載顯示小圖
}
} else
{
if (緩存中有小圖)
{
self.imageView.image = 小圖;
} else? // 處理離線狀態(tài)
{
self.imageView.image = 占位圖片;
}
}
}
}
```
－實(shí)現(xiàn)上面的偽代碼：讀者可以一一對(duì)應(yīng)上面的偽代碼锯蛀。練習(xí)的時(shí)候推薦先寫(xiě)偽代碼，再寫(xiě)真實(shí)代碼
－多多注意注釋解釋次慢。
```
- setItem:(CustomItem *)item
{
_item = item;
// 占位圖片
UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];
// 從內(nèi)存\沙盒緩存中獲得原圖旁涤，
UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
if (originalImage) { // 如果內(nèi)存\沙盒緩存有原圖，那么就直接顯示原圖（不管現(xiàn)在是什么網(wǎng)絡(luò)狀態(tài)）
self.imageView.image = originalImage;
} else { // 內(nèi)存\沙盒緩存沒(méi)有原圖
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下載原圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else if (mgr.isReachableViaWWAN) { // 在使用手機(jī)自帶網(wǎng)絡(luò)
//? ? 用戶的配置項(xiàng)假設(shè)利用NSUserDefaults存儲(chǔ)到了沙盒中
//? ? [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
//? ? [[NSUserDefaults standardUserDefaults] synchronize];
#warning 從沙盒中讀取用戶的配置項(xiàng)：在3G\4G環(huán)境是否仍然下載原圖
BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
if (alwaysDownloadOriginalImage) { // 下載原圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else { // 下載小圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
}
} else { // 沒(méi)有網(wǎng)絡(luò)
UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
if (thumbnailImage) { // 內(nèi)存\沙盒緩存中有小圖
self.imageView.image = thumbnailImage;
} else { // 處理離線狀態(tài)迫像，而且有沒(méi)有緩存時(shí)的情況
self.imageView.image = placeholder;
}
}
}
}
```
###解決了嗎劈愚？真正的坑才剛剛開(kāi)始。
－在表述上述代碼的坑之前闻妓，我們先來(lái)分析一下UITableViewCell的緩存機(jī)制菌羽。
－請(qǐng)看下圖：有一個(gè)tableView正在同時(shí)顯示三個(gè)UITableViewCell，每個(gè)tableViewCell包含一個(gè)imageView的子控件由缆，而且每個(gè)cell都有一個(gè)對(duì)應(yīng)的模型屬性用來(lái)設(shè)置imageView的圖片內(nèi)容注祖。
－注意：由于沒(méi)有cell被推出屏幕，此時(shí)緩存池為空犁功。
－當(dāng)有一個(gè)cell被推到屏幕之外時(shí)氓轰，系統(tǒng)會(huì)自動(dòng)將這個(gè)cell放入自動(dòng)緩存池。注意:cell對(duì)應(yīng)的UIImage圖片數(shù)據(jù)模型并沒(méi)有清空浸卦！還是指向上一個(gè)使用的cell。
－當(dāng)下一個(gè)cell進(jìn)入屏幕案糙，系統(tǒng)會(huì)根據(jù)tableView注冊(cè)的標(biāo)識(shí)找到對(duì)應(yīng)的cell限嫌，拿來(lái)應(yīng)用靴庆。上述進(jìn)入緩存池的cell被重新添加進(jìn)tableView，在tableView的Data Source方法tableView: cellForRowAtIndexPath:中設(shè)置改cell對(duì)應(yīng)的模型數(shù)據(jù)怒医，此時(shí)cell對(duì)應(yīng)的如圖：
－以上就是tableView重用機(jī)制的簡(jiǎn)單介紹炉抒。重新回來(lái)，那么上面所說(shuō)的真正的坑在哪呢稚叹？
用一個(gè)場(chǎng)景來(lái)描述一下吧：當(dāng)用戶所處環(huán)境WiFi網(wǎng)速不夠快(不能立即將圖片下載完畢)焰薄，而在上述代碼，在WiFi環(huán)境下又是下載高清大圖扒袖。所以需要一定的時(shí)間來(lái)完成下載塞茅。而就在此時(shí)，用戶不愿等季率，想看看上次打開(kāi)App時(shí)顯示的圖片野瘦，此時(shí)用戶會(huì)滑到處于下面的cell來(lái)查看。注意：此時(shí)飒泻，上面的cell下載圖片操作并沒(méi)有暫停鞭光，還在處于下載圖片狀態(tài)中。當(dāng)用戶在查看上次打開(kāi)App的顯示圖片時(shí)（上次打開(kāi)App下載完成的圖片泞遗，SDWebImage會(huì)幫我們緩存惰许，不用下載），而正好需要顯示上次打開(kāi)App時(shí)的圖片的cell是利用tableView重用機(jī)制而從緩存池中拿出來(lái)的cell史辙，等到處于上面的cell的高清大圖已經(jīng)下載好了的時(shí)候汹买，SDWebImage默認(rèn)做法是，立馬把下載好的圖片設(shè)置給ImageView髓霞，所以我們這時(shí)候會(huì)在底下的顯示的cell顯示上面的圖片卦睹，造成數(shù)據(jù)錯(cuò)亂，這是非常嚴(yán)重的BUG方库。
###那么該如何解決這個(gè)棘手的問(wèn)題呢结序？
-如果我們能在cell被從緩存池中拿出來(lái)使用的時(shí)候，將這個(gè)cell放入緩存池之前的下載操作移除纵潦，那么就不會(huì)出現(xiàn)數(shù)據(jù)錯(cuò)亂了徐鹤。
-這時(shí)候你可能會(huì)問(wèn)我：怎么移除下載操作？下載操作不是SDWebImage幫我們做的嗎邀层？
-說(shuō)的沒(méi)錯(cuò)返敬，確實(shí)是SDWebImage幫我們下載圖片的，我們來(lái)扒一扒SDWebImage源碼寥院，看看他是怎么完成的劲赠。
```
- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock {? ? // 關(guān)閉當(dāng)前圖片的下載操作? ? [self sd_cancelCurrentImageLoad];? ? objc_setAssociatedObject(self, &imageURLKey, url, OBJC_ASSOCIATION_RETAIN_NONATOMIC);? ? if (!(options & SDWebImageDelayPlaceholder)) {? ? ? ? dispatch_main_async_safe(^{? ? ? ? ? ? self.image = placeholder;? ? ? ? });? ? }? ? if (url) {? ? ? ? // check if activityView is enabled or not? ? ? ? if ([self showActivityIndicatorView]) {? ? ? ? ? ? [self addActivityIndicator];? ? ? ? }? ? ? ? __weak __typeof(self)wself = self;? ? ? ? idoperation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:options progress:progressBlock completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
[wself removeActivityIndicator];
if (!wself) return;
dispatch_main_sync_safe(^{
if (!wself) return;
if (image && (options & SDWebImageAvoidAutoSetImage) && completedBlock)
{
completedBlock(image, error, cacheType, url);
return;
}
else if (image) {
wself.image = image;
[wself setNeedsLayout];
} else {
if ((options & SDWebImageDelayPlaceholder)) {
wself.image = placeholder;
[wself setNeedsLayout];
}
}
if (completedBlock && finished) {
completedBlock(image, error, cacheType, url);
}
});
}];
[self sd_setImageLoadOperation:operation forKey:@"UIImageViewImageLoad"];
} else {
dispatch_main_async_safe(^{
[self removeActivityIndicator];
if (completedBlock) {
NSError *error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey : @"Trying to load a nil url"}];
completedBlock(nil, error, SDImageCacheTypeNone, url);
}
});
}
}
```
###我們驚奇的發(fā)現(xiàn)，原來(lái)SDWebImage在下載圖片時(shí)，第一件事就是關(guān)閉imageView當(dāng)前的下載操作凛澎！
-是不是開(kāi)始感嘆SDWebImage多么神奇了霹肝？沒(méi)錯(cuò)，我們只需要把我們寫(xiě)的那段代碼所有的直接訪問(wèn)本地緩存代碼利用SDWebImage進(jìn)行設(shè)置就OK了塑煎！
-下面就是完成版代碼沫换。
```
- setItem:(CustomItem *)item
{
_item = item;
// 占位圖片
UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];
// 從內(nèi)存\沙盒緩存中獲得原圖
UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
if (originalImage) { // 如果內(nèi)存\沙盒緩存有原圖，那么就直接顯示原圖（不管現(xiàn)在是什么網(wǎng)絡(luò)狀態(tài)）
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else { // 內(nèi)存\沙盒緩存沒(méi)有原圖
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下載原圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else if (mgr.isReachableViaWWAN) { // 在使用手機(jī)自帶網(wǎng)絡(luò)
//? ? 用戶的配置項(xiàng)假設(shè)利用NSUserDefaults存儲(chǔ)到了沙盒中
//? ? [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
//? ? [[NSUserDefaults standardUserDefaults] synchronize];
#warning 從沙盒中讀取用戶的配置項(xiàng)：在3G\4G環(huán)境是否仍然下載原圖
BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
if (alwaysDownloadOriginalImage) { // 下載原圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
} else { // 下載小圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
}
} else { // 沒(méi)有網(wǎng)絡(luò)
UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
if (thumbnailImage) { // 內(nèi)存\沙盒緩存中有小圖
[self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
} else {
[self.imageView sd_setImageWithURL:nil placeholderImage:placeholder];
}
}
}
}
```
