[[166005]]

SDWebImage作為目前***的圖片下載第三方框架，使用率很高。但是你真的會(huì)用嗎？本文接下來將通過例子分析如何合理使用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í)，顯示圖片縮略圖。如下圖樣例：

圖中顯示的圖片符合根據(jù)網(wǎng)絡(luò)狀態(tài)下載要求

• 由于要監(jiān)聽網(wǎng)絡(luò)狀態(tài)，在這里筆者推薦使用AFNetWorking。

1）在GitHub或者利用cocoaPod給項(xiàng)目導(dǎo)入第三方框架AFNetWorking。

2）在AppDelegate.m文件中的application:didFinishLaunchingWithOptions:方法中監(jiān)聽網(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)聽網(wǎng)絡(luò)狀態(tài)的方法中使用 
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager]; 
    if (mgr.isReachableViaWiFi)     { // 在使用Wifi, 下載原圖 
    } else     { // 其他，下載小圖 
    } 
 } 

• 這時(shí)就會(huì)有iOS學(xué)習(xí)者開始抱怨：這不是很簡(jiǎn)單嗎？于是三下五除二寫完了以下代碼。

  // 利用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í)開發(fā)中，這樣其實(shí)是不合理的。以下是需要注意的細(xì)節(jié)：

1）SDWebImage會(huì)自動(dòng)幫助開發(fā)者緩存圖片（包括內(nèi)存緩存，沙盒緩存），所以我們需要設(shè)置用戶在WiFi環(huán)境下下載的高清圖，下次在蜂窩網(wǎng)絡(luò)狀態(tài)下打開應(yīng)用也應(yīng)顯示高清圖，而不是去下載縮略圖。

2）許多應(yīng)用設(shè)置模塊帶有一個(gè)功能：移動(dòng)網(wǎng)絡(luò)環(huán)境下仍然顯示高清圖。這個(gè)功能其實(shí)是將設(shè)置記錄在沙盒中，關(guān)于數(shù)據(jù)保存到本地，可以查看本人另一篇簡(jiǎn)書首頁文章：iOS本地?cái)?shù)據(jù)存取，看這里就夠了。

3）當(dāng)用戶處于離線狀態(tài)時(shí)候，無法合理處理業(yè)務(wù)。

• 于是，開始加以改進(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í)候推薦先寫偽代碼，再寫真實(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)存\沙盒緩存沒有原圖 
        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 { // 沒有網(wǎng)絡(luò) 
            UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage]; 
            if (thumbnailImage) { // 內(nèi)存\沙盒緩存中有小圖 
                self.imageView.image = thumbnailImage; 
            } else { // 處理離線狀態(tài)，而且有沒有緩存時(shí)的情況 
                self.imageView.image = placeholder; 
            } 
        } 
    } 
} 

解決了嗎？真正的坑才剛剛開始。

• 在表述上述代碼的坑之前，我們先來分析一下UITableViewCell的緩存機(jī)制。

• 請(qǐng)看下圖：有一個(gè)tableView正在同時(shí)顯示三個(gè)UITableViewCell，每個(gè)tableViewCell包含一個(gè)imageView的子控件，而且每個(gè)cell都有一個(gè)對(duì)應(yīng)的模型屬性用來設(shè)置imageView的圖片內(nèi)容。

• 注意：由于沒有cell被推出屏幕，此時(shí)緩存池為空。

cell還沒有被推入緩存池

當(dāng)有一個(gè)cell被推到屏幕之外時(shí)，系統(tǒng)會(huì)自動(dòng)將這個(gè)cell放入自動(dòng)緩存池。注意:cell對(duì)應(yīng)的UIImage圖片數(shù)據(jù)模型并沒有清空！還是指向上一個(gè)使用的cell。

cell被放入緩存池

當(dāng)下一個(gè)cell進(jìn)入屏幕，系統(tǒng)會(huì)根據(jù)tableView注冊(cè)的標(biāo)識(shí)找到對(duì)應(yīng)的cell，拿來應(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)的如圖：

cell被放入緩存池

• 以上就是tableView重用機(jī)制的簡(jiǎn)單介紹。

重新回來，那么上面所說的真正的坑在哪呢？

用一個(gè)場(chǎng)景來描述一下吧：當(dāng)用戶所處環(huán)境WiFi網(wǎng)速不夠快(不能立即將圖片下載完畢)，而在上述代碼，在WiFi環(huán)境下又是下載高清大圖。所以需要一定的時(shí)間來完成下載。而就在此時(shí)，用戶不愿等，想看看上次打開App時(shí)顯示的圖片，此時(shí)用戶會(huì)滑到處于下面的cell來查看。注意：此時(shí)，上面的cell下載圖片操作并沒有暫停，還在處于下載圖片狀態(tài)中。當(dāng)用戶在查看上次打開App的顯示圖片時(shí)（上次打開App下載完成的圖片，SDWebImage會(huì)幫我們緩存，不用下載），而正好需要顯示上次打開App時(shí)的圖片的cell是利用tableView重用機(jī)制而從緩存池中拿出來的cell，等到處于上面的cell的高清大圖已經(jīng)下載好了的時(shí)候，SDWebImage默認(rèn)做法是，立馬把下載好的圖片設(shè)置給ImageView，所以我們這時(shí)候會(huì)在底下的顯示的cell顯示上面的圖片，造成數(shù)據(jù)錯(cuò)亂，這是非常嚴(yán)重的BUG。

那么該如何解決這個(gè)棘手的問題呢？

如果我們能在cell被從緩存池中拿出來使用的時(shí)候，將這個(gè)cell放入緩存池之前的下載操作移除，那么就不會(huì)出現(xiàn)數(shù)據(jù)錯(cuò)亂了。

這時(shí)候你可能會(huì)問我：怎么移除下載操作？下載操作不是SDWebImage幫我們做的嗎？

說的沒錯(cuò)，確實(shí)是SDWebImage幫我們下載圖片的，我們來扒一扒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; 
        id  operation = [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)，原來SDWebImage在下載圖片時(shí)，***件事就是關(guān)閉imageView當(dāng)前的下載操作！

是不是開始感嘆SDWebImage多么神奇了？沒錯(cuò)，我們只需要把我們寫的那段代碼所有的直接訪問本地緩存代碼利用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)存\沙盒緩存沒有原圖 
        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 { // 沒有網(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]; 
            } 
        } 
    } 
} 

本文就介紹到這里，如有疑問或錯(cuò)誤，歡迎指出。