文档章节

iOS开发之加载大量网络图片优化

feng_blog
 feng_blog
发布于 2015/09/07 10:59
字数 1172
阅读 3135
收藏 6

1、概述

在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示。比如:

-(UIImage *) getImageFromURL:(NSString *)fileURL {
  //NSLog(@"执行图片下载函数");    
  UIImage * result;    
  NSData * data = [NSData dataWithContentsOfURL:[NSURL URLWithString:fileURL]];
  result = [UIImage imageWithData:data];    
  return result;
}

加载网络图片可以说是网络应用中必备的。如果单纯的去下载图片,而不去做多线程、缓存等技术去优化,加载图片时的效果与用户体验就会很差。

优化思路为:

(1)本地缓存

(2)异步加载

(3)加载完毕前使用占位图片

2、优化方法

方法1:用NSOperation开异步线程下载图片,当下载完成时替换占位图片

#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;
}

//可抽取出来写到模型中
- (NSArray *)appList {
	if (!_appList) {
		//1.加载plist到数组中
		NSURL *url = [[NSBundle mainBundle] URLForResource:@"apps.plist" withExtension:nil];
		NSArray *array = [NSArray arrayWithContentsOfURL:url];
		//2.遍历数组
		NSMutableArray *arrayM = [NSMutableArray array];
		[array enumerateObjectsUsingBlock: ^(id obj, NSUInteger idx, BOOL *stop) {
		    [arrayM addObject:[XNApp appWithDict:obj]];  //数组中存放的是字典, 转换为app对象后再添加到数组
		}];
		_appList = [arrayM copy];
	}
	return _appList;
}

- (void)viewDidLoad {
	[super viewDidLoad];

	self.tableView.rowHeight = 88;

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

#pragma mark - 数据源方法
- (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];

	//用模型来填充每个cell
	XNApp *app = self.appList[indexPath.row];
	cell.textLabel.text = app.name;  //设置文字

	//设置图像: 模型中图像为nil时用默认图像,并下载图像. 否则用模型中的内存缓存图像.
	if (!app.image) {
		cell.imageView.image = [UIImage imageNamed:@"user_default"];

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

	return cell;
}

/**始终记住, 通过模型来修改显示. 而不要试图直接修改显示*/
- (void)downloadImg:(NSIndexPath *)indexPath {
	XNApp *app  = self.appList[indexPath.row]; //取得改行对应的模型

	[self.queue addOperationWithBlock: ^{
	    NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]]; //得到图像数据
	    UIImage *image = [UIImage imageWithData:imgData];

	    //在主线程中更新UI
	    [[NSOperationQueue mainQueue] addOperationWithBlock: ^{
	        //通过修改模型, 来修改数据
	        app.image = image;
	        //刷新指定表格行
	        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
		}];
	}];
}

@end

上述代码只是做了内存缓存,还没有做本地缓存,因为这里这种方法不是重点,也不是首选方法。上面代码每次重新进入应用时,还会从网上重新下载。如果要继续优化上面的代码,需要自己去实现本地缓存。

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

特点:

依赖的库很少,功能全面。

自动实现磁盘缓存:缓存图片名字是以MD5进行加密的后的名字进行命名.(因为加密那堆字串是唯一的)

加载网络图片时直接设置占位图片:[imageView sd_setImageWithURL:imageurl  placeholderImage:[UIImage imageNamed:@”xxxxx”]]。

就一个方法就实现了多线程\带缓冲等效果.(可用带参数的方法,具体可看头文件)

用SDWebImage修改上面的方法后的代码可简化为:

#pragma mark - 数据源方法
- (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];

	//用模型来填充每个cell
	XNApp *app = self.appList[indexPath.row];
	cell.textLabel.text = app.name;  //设置文字

//	//设置图像: 模型中图像为nil时用默认图像,并下载图像. 否则用模型中的内存缓存图像.
//	if (!cell.imageView.image) {
//		cell.imageView.image = [UIImage imageNamed:@"user_default"];
//
//		[self downloadImg:indexPath];
//	}
//	else {
//		//直接用模型中的内存缓存
//		cell.imageView.image = app.image;
//	}


	//使用SDWebImage来完成上面的功能. 针对ImageView.
	//一句话, 自动实现了异步下载. 图片本地缓存. 网络下载. 自动设置占位符.
	[cell.imageView sd_setImageWithURL:[NSURL URLWithString:app.icon] placeholderImage:[UIImage imageNamed:@"user_default"]];


	return cell;
}

/**始终记住, 通过模型来修改显示. 而不要试图直接修改显示*/
//- (void)downloadImg:(NSIndexPath *)indexPath {
//	XNApp *app  = self.appList[indexPath.row]; //取得改行对应的模型
//
//	[self.queue addOperationWithBlock: ^{
//	    NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]]; //得到图像数据
//	    UIImage *image = [UIImage imageWithData:imgData];
//
//	    //在主线程中更新UI
//	    [[NSOperationQueue mainQueue] addOperationWithBlock: ^{
//	        //通过修改模型, 来修改数据
//	        app.image = image;
//	        //刷新指定表格行
//	        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
//		}];
//	}];
//}

@end

【备注】SDWebImage中的一些参数:

*SDWebImageRetryFailed = 1<< 0,   默认选项,失败后重试

*SDWebImageLowPriority = 1<< 1,    使用低优先级

*SDWebImageCacheMemoryOnly = 1<< 2,   仅仅使用内存缓存

*SDWebImageProgressiveDownload = 1<< 3,   显示现在进度

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

*SDWebImageContinueInBackground =1 << 5,   后台继续下载图像

*SDWebImageHandleCookies = 1<< 6,    处理Cookie

*SDWebImageAllowInvalidSSLCertificates= 1 << 7,    允许无效的SSL验证

*SDWebImageHighPriority = 1<< 8,     高优先级

*SDWebImageDelayPlaceholder = 1<< 9     延迟显示占位图片


© 著作权归作者所有

feng_blog

feng_blog

粉丝 120
博文 130
码字总数 105422
作品 3
朝阳
iOS工程师
私信 提问
移动开发规范概述-alloyteam【腾讯】

移动开发规范概述 以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用 字体设置 iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降...

陈文亮
2015/02/28
9
0
OSC 第 76 期高手问答 — iOS 性能优化&数据持久化

OSCHINA 本期高手问答 ( 5月27日- 6月2日) 我们请来了@智捷课堂(关东升)为大家解答关于 iOS 性能优化和数据持久化 方面的问题。 关东升,智捷课堂创始人,国内知名 iOS 技术作家,iOS 技术...

叶秀兰
2015/05/27
4.1K
27
iOS运营级B2B服务平台App、自定义图标库、个人中心页面、识别身份证Demo、瀑布流等源码

iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画(http://www.code4app.com/thread-10860-1-1.html) 一个近乎完整的可识别中国身份证信息的Demo 可自动快速...(http://www.code4a...

Android爱开源
2018/10/25
17
0
携程的跨平台开发框架 - CRN

CRN是Ctrip React Native简称,由携程无线平台研发团队基于React Native框架优化,定制成稳定性和性能更佳、也更适合业务场景的的跨平台开发框架。 本次开源基于版本, 开源的主要是性能优化部...

blackwuxin
07/25
492
0
iOS股票K线图、校园助手、适配iPhone X、版本检测等源码

iOS精选源码 快速创建menuItem控件 YHPhotoBrowser 优化的网络图片浏览 cocoaAsynSocket demo (包含客户端和服务端) SwipeMenuViewController现在支持iPhoneX和Swift4。 仿微信的提醒对话框 ...

sunnyaigd
2017/10/31
52
0

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
24分钟前
2
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
27分钟前
2
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
45分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
59分钟前
7
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
681
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部