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

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     延迟显示占位图片

时间: 2025-01-08 13:52:07

iOS开发之加载大量网络图片优化的相关文章

iOS开发之加载、滑动翻阅大量图片优化解决方案

本文转载至 http://mobile.51cto.com/iphone-413267.htm 今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制.我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清大图全屏浏览界面的这短暂的1秒内(和后续的几秒),都发生了什么. AD:2014WOT全球软件技术峰会北京站 课程视频发布 今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制. 我要详细说一下,在缩略图界

iOS开发-UIWebView加载本地和网络数据

UIWebView是内置的浏览器控件,可以用它来浏览网页.打开文档,关于浏览网页榜样可以参考UC,手机必备浏览器,至于文档浏览的手机很多图书阅读软件,UIWebView是一个混合体,具体的功能控件内置的,实现一些基本的功能.UIWebView可以查看Html网页,pdf文件,docx文件,txt文件文件,系统自带的Safari就是UIWebView实现的. 基础布局 页面布局很简单就是一个文本框,一个按钮,一个UIWebView,页面布局如下: 如果想简单一点的话,其实用UIWebView也行,

iOS开发_UIWebView加载本地html

项目中遇到这样的问题:webview放在uiscrollview,webview加载本地html,之后需要计算webview高度. 步骤如下: 1.首先创建webview.几点注意,高度一定要小于你要加载的html的高度,最好设定个最小值,比如1:并且设置scalesPageToFit = YES使之自适应高度; self.bottomWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.middle

ios开发 uiwebview加载网页时阻止禁止取消图片下载

http://www.icab.de/blog/2009/08/18/url-filtering-with-uiwebview-on-the-iphone/ - (NSCachedURLResponse*)cachedResponseForRequest:(NSURLRequest*)request { NSURL *url = [request URL]; BOOL blockURL = [url.absoluteString hasSuffix:@"jpg"] || [url.ab

iOS图片加载速度极限优化—FastImageCache解析

本文转载至 http://blog.cnbang.net/tech/2578/ FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的. 优化点 iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步骤: 从磁盘拷贝数据到内核缓冲区 从内核缓冲区复制数据到用户空间 生成UIImageView,把图像数据赋值给UIImageView 如果图像数据为未解码的PNG/JPG,解码为位图数据

iOS 异步图片加载优化与常用开源库分析

1. 网络图片显示大体步骤: 下载图片 图片处理(裁剪,边框等) 写入磁盘 从磁盘读取数据到内核缓冲区 从内核缓冲区复制到用户空间(内存级别拷贝) 解压缩为位图(耗cpu较高) 如果位图数据不是字节对齐的,CoreAnimation会copy一份位图数据并进行字节对齐 CoreAnimation渲染解压缩过的位图 以上4,5,6,7,8步是在UIImageView的setImage时进行的,所以默认在主线程进行(iOS UI操作必须在主线程执行). 2. 一些优化思路: 异步下载图片 image

[WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化

11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依赖其来给列表加载数据,还可以利用虚拟化的特性去做更多的事情.虚拟化技术有一个很重要的特性就是,它可以准确地判断出哪些列表项处于手机屏幕中,可以动态地去更新这些数据.基于这样的特性,我们可以给列表的功能做更多的优化. 那么下面我们基于一个例子来讲解利用虚拟化技术去做列表的性能优化.有这么一个需求,需要

【iOS】网络加载图片缓存与SDWebImage

加载网络图片可以说是网络应用中必备的.如果单纯的去下载图片,而不去做多线程.缓存等技术去优化,加载图片时的效果与用户体验就会很差. 一.自己实现加载图片的方法 tips: *iOS中所有网络访问都是异步的.(自己开线程去下载) *普通为模型增加UIImage属性的方法做的是内存缓存(下次启动还需要从网络重新加载), 而要做本地缓存的话,还要自己手动存储网络上下载的图片. *为了加快访问, 还需要自己去弄缓存.(内存缓存或者本地缓存) *当图片没有下载完成时,还要设置占位图片. 以下代码用NSOp

Android开发--异步加载

因为移动端软件开发思维模式或者说是开发的架构其实是不分平台和编程语言的,就拿安卓和IOS来说,他们都是移动前端app开发展示数据和用户交互数据的数据终端,移动架构的几个大模块:UI界面展示.本地数据可持续化存储.网络数据请求.性能优化等等,安卓和IOS开发都要考虑这些架构的模块.所以,熟悉IOS的开发的人,再去学习一下安卓的开发以及安卓的开发模式,你会发现很多技术和思想安卓和IOS是一样的,只是可能说法不一样,由于编程语言比如OC和Java略微的差异性,编码习惯和细节不一样之外,其他都是一样的.