快捷導(dǎo)航

IOS開(kāi)發(fā)中加載大量網(wǎng)絡(luò)圖片優(yōu)化方法

更新時(shí)間：2017年03月30日 09:11:02 投稿：lqh

這篇文章主要介紹了IOS開(kāi)發(fā)中加載大量網(wǎng)絡(luò)圖片如何優(yōu)化的相關(guān)資料,需要的朋友可以參考下

IOS開(kāi)發(fā)中加載大量網(wǎng)絡(luò)圖片如何優(yōu)化

1、概述

在IOS下通過(guò)URL讀一張網(wǎng)絡(luò)圖片并不像其他編程語(yǔ)言那樣可以直接把圖片路徑放到圖片路徑的位置就ok，而是需要我們通過(guò)一段類(lèi)似流的方式去加載網(wǎng)絡(luò)圖片，接著才能把圖片放入圖片路徑顯示。比如：

-(UIImage *) getImageFromURL:(NSString *)fileURL {
 //NSLog(@"執(zhí)行圖片下載函數(shù)");  
 UIImage * result;  
 NSData * data = [NSData dataWithContentsOfURL:[NSURL URLWithString:fileURL]];
 result = [UIImage imageWithData:data];  
 return result;
}

加載網(wǎng)絡(luò)圖片可以說(shuō)是網(wǎng)絡(luò)應(yīng)用中必備的。如果單純的去下載圖片，而不去做多線程、緩存等技術(shù)去優(yōu)化，加載圖片時(shí)的效果與用戶(hù)體驗(yàn)就會(huì)很差。

優(yōu)化思路為：

（1）本地緩存

（2）異步加載

（3）加載完畢前使用占位圖片

2、優(yōu)化方法

方法1：用NSOperation開(kāi)異步線程下載圖片，當(dāng)下載完成時(shí)替換占位圖片

#import "XNViewController.h"
#import "XNApp.h"

@interface XNViewController ()
@property (nonatomic, strong) NSArray *appList;
@property (nonatomic, strong) NSOperationQueue *queue;
@end

@implementation XNViewController
#pragma mark - 懶加載

- (NSOperationQueue *)queue {
 if (!_queue) _queue = [[NSOperationQueue alloc] init];
 return _queue;
}

//可抽取出來(lái)寫(xiě)到模型中
- (NSArray *)appList {
 if (!_appList) {
 //1.加載plist到數(shù)組中
 NSURL *url = [[NSBundle mainBundle] URLForResource:@"apps.plist" withExtension:nil];
 NSArray *array = [NSArray arrayWithContentsOfURL:url];
 //2.遍歷數(shù)組
 NSMutableArray *arrayM = [NSMutableArray array];
 [array enumerateObjectsUsingBlock: ^(id obj, NSUInteger idx, BOOL *stop) {
   [arrayM addObject:[XNApp appWithDict:obj]]; //數(shù)組中存放的是字典, 轉(zhuǎn)換為app對(duì)象后再添加到數(shù)組
 }];
 _appList = [arrayM copy];
 }
 return _appList;
}

- (void)viewDidLoad {
 [super viewDidLoad];

 self.tableView.rowHeight = 88;

//  NSLog(@"appList-%@",_appList);
}

#pragma mark - 數(shù)據(jù)源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return self.appList.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 static NSString *ID = @"Cell";
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

 //用模型來(lái)填充每個(gè)cell
 XNApp *app = self.appList[indexPath.row];
 cell.textLabel.text = app.name; //設(shè)置文字

 //設(shè)置圖像: 模型中圖像為nil時(shí)用默認(rèn)圖像,并下載圖像. 否則用模型中的內(nèi)存緩存圖像.
 if (!app.image) {
 cell.imageView.image = [UIImage imageNamed:@"user_default"];

 [self downloadImg:indexPath];
 }
 else {
 //直接用模型中的內(nèi)存緩存
 cell.imageView.image = app.image;
 }
// NSLog(@"cell--%p", cell);

 return cell;
}

/**始終記住, 通過(guò)模型來(lái)修改顯示. 而不要試圖直接修改顯示*/
- (void)downloadImg:(NSIndexPath *)indexPath {
 XNApp *app = self.appList[indexPath.row]; //取得改行對(duì)應(yīng)的模型

 [self.queue addOperationWithBlock: ^{
   NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]]; //得到圖像數(shù)據(jù)
   UIImage *image = [UIImage imageWithData:imgData];

   //在主線程中更新UI
   [[NSOperationQueue mainQueue] addOperationWithBlock: ^{
     //通過(guò)修改模型, 來(lái)修改數(shù)據(jù)
     app.image = image;
     //刷新指定表格行
     [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
 }];
 }];
}

@end

上述代碼只是做了內(nèi)存緩存，還沒(méi)有做本地緩存，因?yàn)檫@里這種方法不是重點(diǎn)，也不是首選方法。上面代碼每次重新進(jìn)入應(yīng)用時(shí)，還會(huì)從網(wǎng)上重新下載。如果要繼續(xù)優(yōu)化上面的代碼，需要自己去實(shí)現(xiàn)本地緩存。

方法2：使用第三方框架SDWebImage

特點(diǎn)：

依賴(lài)的庫(kù)很少，功能全面。

自動(dòng)實(shí)現(xiàn)磁盤(pán)緩存：緩存圖片名字是以MD5進(jìn)行加密的后的名字進(jìn)行命名.(因?yàn)榧用苣嵌炎执俏ㄒ坏?

加載網(wǎng)絡(luò)圖片時(shí)直接設(shè)置占位圖片：[imageView sd_setImageWithURL:imageurl placeholderImage:[UIImage imageNamed:@”xxxxx”]]。

就一個(gè)方法就實(shí)現(xiàn)了多線程\帶緩沖等效果.(可用帶參數(shù)的方法,具體可看頭文件)

用SDWebImage修改上面的方法后的代碼可簡(jiǎn)化為：

#pragma mark - 數(shù)據(jù)源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return self.appList.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 static NSString *ID = @"Cell";
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

 //用模型來(lái)填充每個(gè)cell
 XNApp *app = self.appList[indexPath.row];
 cell.textLabel.text = app.name; //設(shè)置文字

// //設(shè)置圖像: 模型中圖像為nil時(shí)用默認(rèn)圖像,并下載圖像. 否則用模型中的內(nèi)存緩存圖像.
// if (!cell.imageView.image) {
// cell.imageView.image = [UIImage imageNamed:@"user_default"];
//
// [self downloadImg:indexPath];
// }
// else {
// //直接用模型中的內(nèi)存緩存
// cell.imageView.image = app.image;
// }


 //使用SDWebImage來(lái)完成上面的功能. 針對(duì)ImageView.
 //一句話, 自動(dòng)實(shí)現(xiàn)了異步下載. 圖片本地緩存. 網(wǎng)絡(luò)下載. 自動(dòng)設(shè)置占位符.
 [cell.imageView sd_setImageWithURL:[NSURL URLWithString:app.icon] placeholderImage:[UIImage imageNamed:@"user_default"]];


 return cell;
}

/**始終記住, 通過(guò)模型來(lái)修改顯示. 而不要試圖直接修改顯示*/
//- (void)downloadImg:(NSIndexPath *)indexPath {
// XNApp *app = self.appList[indexPath.row]; //取得改行對(duì)應(yīng)的模型
//
// [self.queue addOperationWithBlock: ^{
//   NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]]; //得到圖像數(shù)據(jù)
//   UIImage *image = [UIImage imageWithData:imgData];
//
//   //在主線程中更新UI
//   [[NSOperationQueue mainQueue] addOperationWithBlock: ^{
//     //通過(guò)修改模型, 來(lái)修改數(shù)據(jù)
//     app.image = image;
//     //刷新指定表格行
//     [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
// }];
// }];
//}

@end

【備注】SDWebImage中的一些參數(shù)：

*SDWebImageRetryFailed = 1<< 0,  默認(rèn)選項(xiàng)，失敗后重試

*SDWebImageLowPriority = 1<< 1,  使用低優(yōu)先級(jí)

*SDWebImageCacheMemoryOnly = 1<< 2,  僅僅使用內(nèi)存緩存

*SDWebImageProgressiveDownload = 1<< 3,  顯示現(xiàn)在進(jìn)度

*SDWebImageRefreshCached = 1<< 4,  刷新緩存

*SDWebImageContinueInBackground =1 << 5,  后臺(tái)繼續(xù)下載圖像

*SDWebImageHandleCookies = 1<< 6,  處理Cookie

*SDWebImageAllowInvalidSSLCertificates= 1 << 7,  允許無(wú)效的SSL驗(yàn)證

*SDWebImageHighPriority = 1<< 8,   高優(yōu)先級(jí)

*SDWebImageDelayPlaceholder = 1<< 9   延遲顯示占位圖片

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: