SDWebImage下載圖片的底層實現

@WilliamAlex大叔

前言

SDWebImage框架是我們最常用的框架,我們下載圖片,清除緩存等都可以使用該框架.下面我們模仿SDWebImage來實現多圖片的下載

在寫代碼之前,我們先整理整理思路,下載圖片我們分為兩種情況,有緩存和沒緩存,下面我們來看看我做的兩幅圖

無沙盒緩存

無沙盒緩存.png
有沙盒緩存

有沙盒緩存.png

糾正一點: 圖片中的下載操作是是保存到一個可變的字典中的,不是數組,畫圖的時候一整天都沒有吃飯,肚子太餓了,出了錯,還望大家見諒

代碼實現

在正式寫代碼之前,需要說明幾步操作

定義模型類
將storyboard中的控制器移除,拖入一個新的UITableViewController控制器,綁定ID:"apps"以及綁定控制器,將類型設置為subtitle,最后給控制器設置啟動箭頭.
將ViewController的父類換成UITableViewController

代碼存在很大問題(需要優化)
- 問題 1,滑動界面時有嚴重的卡頓現象,原因是下載操作是在主線程上執行的.

#import "ViewController.h"
#import "WGApps.h"

@interface ViewController ()

/** 圖片緩存(plist文件中是字典存儲的) */
@property (nonatomic, weak) NSMutableDictionary *images;

/** apps數據源*/
@property(nonatomic, strong) NSArray *apps;

@end

@implementation ViewController

#pragma mark - 生命周期方法
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.tableView.rowHeight = 44;
}


#pragma mark ----------------
#pragma mark - lazyLoading

- (NSMutableDictionary *)images {
    if (_images == nil) {

        _images = [NSMutableDictionary dictionary];
    }

    return _images;
}

- (NSArray *)apps {
    if (_apps == nil) {

        // 加載plist文件
        NSString *path = [[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil];

        // 加載數據
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *tempArray = [NSMutableArray arrayWithCapacity:dictArray.count];
        // 字典數組轉模型數組
        for (NSDictionary *dict in dictArray) {

         [tempArray addObject:[WGApps appsWithDict:dict]];
        }
        _apps = tempArray;
    }
    return _apps;
}

#pragma mark - 數據源方法

// 一共有多少個cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.apps.count;
}

// 每一個cell顯示什么內容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    // 定義ID(最好和storyboard中定義的ID一致)
    static NSString *ID = @"apps";

    // 創建cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 通過模型拿到對應的資源
    WGApps *app = self.apps[indexPath.row];

    // 設置數據
    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;

    // 下載頭像

    // 1, 首先去內存緩存中取,如果沒有再去沙盒中去
    UIImage *image = [self.images objectForKey:app.icon];

    if (image) {
        // 來到這里,說明圖片緩存中已經有需要的圖片,直接顯示到對應的cell即可
        cell.imageView.image = image;
    } else
    {
        // 來到這里表示:圖片緩存中沒有所需要的圖片,那么這時候就要到對應的沙盒中找有沒有下載的圖片

        // 1, 獲取沙盒路徑
        NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
        // 注意:拿到沙盒路徑還不夠,我們需要的是下載圖片的路徑,所以需要拼接,拿到全路徑
        // 2, 獲取模型中圖片資源最后一個目錄名
        NSString *fileName = [app.icon lastPathComponent];

        // 3, 拼接路徑
        NSString *fullPath = [cachesPath stringByAppendingPathComponent:fileName];

        // 注意 : 在沙盒中的保存的資源是以二進制的形式存在的.我們還需要判斷沙盒中是否有下載過的圖片
        // 4, 通過圖片路徑,拿到下載的圖片
        NSData *imageData = [NSData dataWithContentsOfFile:fullPath];

        // 5, 判斷沙盒中是否有值
        if (imageData) {
            // 來到這里說明沙盒中有下載好的圖片,直接將二進制轉為圖片顯示即可,但是最后還需要講圖片報訊到圖片緩存中,方便下次直接獲取.
            UIImage *image = [UIImage imageWithData:imageData];

            // 顯示圖片
            cell.imageView.image = image;

            // 將圖片保存到圖片緩存中
            [self.images setObject:image forKey:app.icon];
        } else
        {

            // 來到這里說明沙盒中沒有值,這時候我們就需要下載圖片資源啦.
            // 下載圖片
            NSURL *url = [NSURL URLWithString:app.icon];

            // 將url轉為data保存到本地
            NSData *data = [NSData dataWithContentsOfURL:url];

            // 再將二進制轉為圖片顯示到cell上
            UIImage *image = [UIImage imageWithData:data];

            // 顯示圖片
            cell.imageView.image = image;

            // 將下載的圖片保存到圖片緩存和沙盒中
            [self.images setObject:image forKey:app.icon];
            [data writeToFile:fullPath atomically:YES];

        }
    }
    return cell;
}

多圖片下載(優化后的代碼)

解決的問題 : 解決了卡頓現象,避免了重復下載


#import "ViewController.h"
#import "WGApps.h"


@interface ViewController ()

/** 圖片緩存(plist文件中是字典存儲的) */
@property (nonatomic, weak) NSMutableDictionary *images;

/** apps數據源*/
@property(nonatomic, strong) NSArray *apps;

/** 下載操作 */
@property(nonatomic, strong) NSMutableDictionary *operations;

/** 隊列 */
@property(nonatomic, strong) NSOperationQueue *queue;

@end

@implementation ViewController

#pragma mark - 生命周期方法
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.tableView.rowHeight = 44;
}


#pragma mark ----------------
#pragma mark - lazyLoading

- (NSMutableDictionary *)operations
{
    if (_operations == nil) {
        _operations = [NSMutableDictionary dictionary];
    }
    return _operations;
}

- (NSOperationQueue *)queue {
    if (_queue == nil) {
        // 創建隊列
        _queue = [[NSOperationQueue alloc] init];

        // 設置最大并發數
        _queue.maxConcurrentOperationCount = 3;
    }
    return _queue;
}

- (NSMutableDictionary *)images {
    if (_images == nil) {

        _images = [NSMutableDictionary dictionary];
    }

    return _images;
}

- (NSArray *)apps {
    if (_apps == nil) {

        // 加載plist文件
        NSString *path = [[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil];

        // 加載數據
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *tempArray = [NSMutableArray arrayWithCapacity:dictArray.count];
        // 字典數組轉模型數組
        for (NSDictionary *dict in dictArray) {

         [tempArray addObject:[WGApps appsWithDict:dict]];
        }
        _apps = tempArray;
    }
    return _apps;
}

#pragma mark - 數據源方法

// 一共有多少個cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.apps.count;
}

// 每一個cell顯示什么內容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    // 定義ID(最好和storyboard中定義的ID一致)
    static NSString *ID = @"apps";

    // 創建cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 通過模型拿到對應的資源
    WGApps *app = self.apps[indexPath.row];

    // 設置數據
    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;

    // 下載頭像

    // 1, 首先去內存緩存中取,如果沒有再去沙盒中去
    UIImage *image = [self.images objectForKey:app.icon];

    if (image) {
        // 來到這里,說明圖片緩存中已經有需要的圖片,直接顯示到對應的cell即可
        cell.imageView.image = image;
    } else
    {
        // 來到這里表示:圖片緩存中沒有所需要的圖片,那么這時候就要到對應的沙盒中找有沒有下載的圖片

        // 1, 獲取沙盒路徑
        NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
        // 注意:拿到沙盒路徑還不夠,我們需要的是下載圖片的路徑,所以需要拼接,拿到全路徑
        // 2, 獲取模型中圖片資源最后一個目錄名
        NSString *fileName = [app.icon lastPathComponent];

        // 3, 拼接路徑
        NSString *fullPath = [cachesPath stringByAppendingPathComponent:fileName];

        // 注意 : 在沙盒中的保存的資源是以二進制的形式存在的.我們還需要判斷沙盒中是否有下載過的圖片
        // 4, 通過圖片路徑,拿到下載的圖片
        NSData *imageData = [NSData dataWithContentsOfFile:fullPath];

        // 5, 判斷沙盒中是否有值
        if (imageData) {
            // 來到這里說明沙盒中有下載好的圖片,直接將二進制轉為圖片顯示即可,但是最后還需要講圖片報訊到圖片緩存中,方便下次直接獲取.
            UIImage *image = [UIImage imageWithData:imageData];

            // 顯示圖片
            cell.imageView.image = image;

            // 將圖片保存到圖片緩存中
            [self.images setObject:image forKey:app.icon];
        } else
        {

            //設置展占位圖片
            cell.imageView.image = [UIImage imageNamed:@"占位圖片"];

            //查看該圖片的下載操作是否存在
            NSBlockOperation *download = [self.operations objectForKey:app.icon];
            if (download == nil) {

                download = [NSBlockOperation blockOperationWithBlock:^{

                    // 下載圖片
                    NSURL *url = [NSURL URLWithString:app.icon];

                    // 阻塞1秒
                    [NSThread sleepForTimeInterval:1.0];

                    // 將圖片轉為二進制保存到本地沙盒中
                    NSData *data = [NSData dataWithContentsOfURL:url];

                    // 將二進制轉為圖片顯示
                    UIImage *image = [UIImage imageWithData:data];

                    // 如果沒有圖片,一定要講下載操作從字典中移除
                    if (image == nil) {
                        [self.operations removeObjectForKey:app.icon];
                        return ;
                    }

                    //保存圖片到內存緩存
                    [self.images setObject:image forKey:app.icon];

                    //保存圖片到沙河緩存
                    [data writeToFile:fullPath atomically:YES];

                    //線程間通信
                    [[NSOperationQueue mainQueue]addOperationWithBlock:^{

                        //刷新cell
                        [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
                    }];
                    [self.operations removeObjectForKey:app.icon];
                }];

                //加入到操作緩存
                [self.operations setObject:download forKey:app.icon];

                //把操作添加到隊列
                [self.queue addOperation:download];
            }
        }
    }
    return cell;
}

@end

我們使用框架來實現同樣功能

以上就是模仿SDWebImage內部實現多圖片下載的原理,接下來我們使用SDWebImage來實現多圖片下載

#import "ViewController.h"
#import "WGApps.h"
#import "UIImageView+WebCache.h"


@interface ViewController ()

/** apps數據源*/
@property(nonatomic, strong) NSArray *apps;

@end

@implementation ViewController

#pragma mark - 生命周期方法
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.tableView.rowHeight = 84;
}

#pragma mark ----------------
#pragma mark - lazyLoading

- (NSArray *)apps {
    if (_apps == nil) {

        // 加載plist文件
        NSString *path = [[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil];

        // 加載數據
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *tempArray = [NSMutableArray arrayWithCapacity:dictArray.count];
        // 字典數組轉模型數組
        for (NSDictionary *dict in dictArray) {

         [tempArray addObject:[WGApps appsWithDict:dict]];
        }
        _apps = tempArray;
    }
    return _apps;
}

#pragma mark - 數據源方法

// 一共有多少個cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.apps.count;
}

// 每一個cell顯示什么內容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    // 定義ID(最好和storyboard中定義的ID一致)
    static NSString *ID = @"apps";

    // 創建cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 通過模型拿到對應的資源
    WGApps *app = self.apps[indexPath.row];

    // 設置數據
    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;

    // 下載圖片
    [cell.imageView sd_setImageWithURL:[NSURL URLWithString:app.icon] placeholderImage:[UIImage imageNamed:@"placehoder"]];

    return cell;
}

@end

總結

從上面的代碼來看,使用第三方框架大大減少了我們的工作量,不過在使用第三方框架時,我們還是最好多了解一點框架的內部原理,這樣即使出錯了,我們很快就找到問題所在,就像上面優化代碼時,我遇到了一個bug : 我在拼接絕對路徑時,使用錯了方法,本應該使用:stringByAppendingPathComponent.但是我的粗心使用了 : stringByAppendingString,導致出現了問題.經過這樣去了解,這種bug我以后是不會再犯了,即使犯了,也會很快改正過來^o

最后編輯于：2017.12.03 03:25:09

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,563評論 6贊 544
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,694評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,672評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,965評論 1贊 318
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,690評論 6贊 413
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 56,019評論 1贊 329
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 44,013評論 3贊 449
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,188評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,718評論 1贊 336
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,438評論 3贊 360
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,667評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,149評論 5贊 365
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,845評論 3贊 351
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,252評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,590評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,384評論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,635評論 2贊 380

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

SDWebImage下載圖片的底層實現

SDWebImage下載圖片的底層實現

@WilliamAlex大叔

前言

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

SDWebImage下載圖片的底層實現

@WilliamAlex大叔

前言

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频