IOS中UITableView异步加载图片的实现

本文转载至 http://blog.csdn.net/enuola/article/details/8639404

最近做一个项目,需要用到UITableView异步加载图片的例子,看到网上有一个EGOImageView的很好的例子。

但是由于,EGOImageView的实现比较复杂,于是自己就动手做了一个AsynImageView,同样可以实现EGOImageView的效果。

而且自己写的代码比较清晰,容易理解,同样可以实现指定placehoderImage以及指定imageURL,来进行图片的异步加载。

同时,如果图片已经请求过,则不会再重复请求网络,会直接读取本地缓存文件。

效果如下:

具体实现思路如下:

AsynImageView.h的文件内容:

[cpp] view plaincopy

  1. #import <UIKit/UIKit.h>
  2. @interface AsynImageView : UIImageView
  3. {
  4. NSURLConnection *connection;
  5. NSMutableData *loadData;
  6. }
  7. //图片对应的缓存在沙河中的路径
  8. @property (nonatomic, retain) NSString *fileName;
  9. //指定默认未加载时,显示的默认图片
  10. @property (nonatomic, retain) UIImage *placeholderImage;
  11. //请求网络图片的URL
  12. @property (nonatomic, retain) NSString *imageURL;
  13. @end

AsynImageView.m中的文件内容:

[cpp] view plaincopy

  1. #import "AsynImageView.h"
  2. #import <QuartzCore/QuartzCore.h>
  3. @implementation AsynImageView
  4. @synthesize imageURL = _imageURL;
  5. @synthesize placeholderImage = _placeholderImage;
  6. @synthesize fileName = _fileName;
  7. - (id)initWithFrame:(CGRect)frame
  8. {
  9. self = [super initWithFrame:frame];
  10. if (self) {
  11. // Initialization code
  12. self.layer.borderColor = [[UIColor whiteColor] CGColor];
  13. self.layer.borderWidth = 2.0;
  14. self.backgroundColor = [UIColor grayColor];
  15. }
  16. return self;
  17. }
  18. //重写placeholderImage的Setter方法
  19. -(void)setPlaceholderImage:(UIImage *)placeholderImage
  20. {
  21. if(placeholderImage != _placeholderImage)
  22. {
  23. [_placeholderImage release];
  24. _placeholderImage = placeholderImage;
  25. self.image = _placeholderImage;    //指定默认图片
  26. }
  27. }
  28. //重写imageURL的Setter方法
  29. -(void)setImageURL:(NSString *)imageURL
  30. {
  31. if(imageURL != _imageURL)
  32. {
  33. self.image = _placeholderImage;    //指定默认图片
  34. [_imageURL release];
  35. _imageURL = [imageURL retain];
  36. }
  37. if(self.imageURL)
  38. {
  39. //确定图片的缓存地址
  40. NSArray *path=NSSearchPathForDirectoriesInDomains(NSDocumentationDirectory, NSUserDomainMask, YES);
  41. NSString *docDir=[path objectAtIndex:0];
  42. NSString *tmpPath=[docDir stringByAppendingPathComponent:@"AsynImage"];
  43. NSFileManager *fm = [NSFileManager defaultManager];
  44. if(![fm fileExistsAtPath:tmpPath])
  45. {
  46. [fm createDirectoryAtPath:tmpPath withIntermediateDirectories:YES attributes:nil error:nil];
  47. }
  48. NSArray *lineArray = [self.imageURL componentsSeparatedByString:@"/"];
  49. self.fileName = [NSString stringWithFormat:@"%@/%@", tmpPath, [lineArray objectAtIndex:[lineArray count] - 1]];
  50. //判断图片是否已经下载过,如果已经下载到本地缓存,则不用重新下载。如果没有,请求网络进行下载。
  51. if(![[NSFileManager defaultManager] fileExistsAtPath:_fileName])
  52. {
  53. //下载图片,保存到本地缓存中
  54. [self loadImage];
  55. }
  56. else
  57. {
  58. //本地缓存中已经存在,直接指定请求的网络图片
  59. self.image = [UIImage imageWithContentsOfFile:_fileName];
  60. }
  61. }
  62. }
  63. //网络请求图片,缓存到本地沙河中
  64. -(void)loadImage
  65. {
  66. //对路径进行编码
  67. @try {
  68. //请求图片的下载路径
  69. //定义一个缓存cache
  70. NSURLCache *urlCache = [NSURLCache sharedURLCache];
  71. /*设置缓存大小为1M*/
  72. [urlCache setMemoryCapacity:1*124*1024];
  73. //设子请求超时时间为30s
  74. NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:self.imageURL] cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:60.0];
  75. //从请求中获取缓存输出
  76. NSCachedURLResponse *response = [urlCache cachedResponseForRequest:request];
  77. if(response != nil)
  78. {
  79. //            NSLog(@"如果又缓存输出,从缓存中获取数据");
  80. [request setCachePolicy:NSURLRequestReturnCacheDataDontLoad];
  81. }
  82. /*创建NSURLConnection*/
  83. if(!connection)
  84. connection = [[NSURLConnection alloc] initWithRequest:request delegate:self startImmediately:YES];
  85. //开启一个runloop,使它始终处于运行状态
  86. UIApplication *app = [UIApplication sharedApplication];
  87. app.networkActivityIndicatorVisible = YES;
  88. [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];
  89. }
  90. @catch (NSException *exception) {
  91. //        NSLog(@"没有相关资源或者网络异常");
  92. }
  93. @finally {
  94. ;//.....
  95. }
  96. }
  97. #pragma mark - NSURLConnection Delegate Methods
  98. //请求成功,且接收数据(每接收一次调用一次函数)
  99. -(void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
  100. {
  101. if(loadData==nil)
  102. {
  103. loadData=[[NSMutableData alloc]initWithCapacity:2048];
  104. }
  105. [loadData appendData:data];
  106. }
  107. -(void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
  108. {
  109. }
  110. -(NSCachedURLResponse *)connection:(NSURLConnection *)connection willCacheResponse:(NSCachedURLResponse *)cachedResponse
  111. {
  112. return cachedResponse;
  113. //    NSLog(@"将缓存输出");
  114. }
  115. -(NSURLRequest *)connection:(NSURLConnection *)connection willSendRequest:(NSURLRequest *)request redirectResponse:(NSURLResponse *)response
  116. {
  117. //    NSLog(@"即将发送请求");
  118. return request;
  119. }
  120. //下载完成,将文件保存到沙河里面
  121. -(void)connectionDidFinishLoading:(NSURLConnection *)theConnection
  122. {
  123. UIApplication *app = [UIApplication sharedApplication];
  124. app.networkActivityIndicatorVisible = NO;
  125. //图片已经成功下载到本地缓存,指定图片
  126. if([loadData writeToFile:_fileName atomically:YES])
  127. {
  128. self.image = [UIImage imageWithContentsOfFile:_fileName];
  129. }
  130. connection = nil;
  131. loadData = nil;
  132. }
  133. //网络连接错误或者请求成功但是加载数据异常
  134. -(void)connection:(NSURLConnection *)theConnection didFailWithError:(NSError *)error
  135. {
  136. UIApplication *app = [UIApplication sharedApplication];
  137. app.networkActivityIndicatorVisible = NO;
  138. //如果发生错误,则重新加载
  139. connection = nil;
  140. loadData = nil;
  141. [self loadImage];
  142. }
  143. -(void)dealloc
  144. {
  145. [_fileName release];
  146. [loadData release];
  147. [connection release];
  148. [_placeholderImage release];
  149. [_imageURL release];
  150. [super dealloc];
  151. }
  152. @end

上面的AsynImageView的.h和.m文件,就是所要实现的核心代码。如果想要调用AsynImageView,则只需执行如下代码即可:(需导入#import"AsynImageView.h")

[cpp] view plaincopy

  1. asynImgView = [[AsynImageView alloc] initWithFrame:CGRectMake(0, 5, 200, 100)];
  2. asynImgView.placeholderImage = [UIImage imageNamed:@"place.png"];
  3. asynImgView.imageURL = [NSString stringWithFormat:@"http://images.17173.com/2012/news/2012/10/10/lj1010sb10ds.jpg"];
  4. [self.view addSubView:asynImgView];

下面是我实现的UITableView异步加载图片的程序链接,就是上面的效果图的程序完整代码,大家可以参考一下:

http://download.csdn.net/detail/enuola/5112070

如有不恰当的地方,还望指点。

另外,图片的缓存可以定期进行清理,在此处没有写出清理代码,可以自行添加。

时间: 2024-09-29 01:59:28

IOS中UITableView异步加载图片的实现的相关文章

ios UITableView 异步加载图片并防止错位

UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况 对错位原因不明白的同学请参考我的另外一篇随笔:http://www.cnblogs.com/lesliefang/p/3619223.html . 当然大多数情况下可以用 SDWebImage, 这个库功能强大,封装的很好.但自己重头来写可能对问题理解的更深. SDWebImage 有点复杂,很多人也会参考一下封装出一套适合自己的类库. 基本思路如下: 1 扩展(category) UIImage

Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

Android中ListView异步加载图片错位.重复.闪烁问题分析及解决方案 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如ListView上有100个Item,一屏只显示10个Item,我们知道getView()中convertView是用来复用View对象的,因为一个Item的对应一个View对象,而ImageView控件就是View对象通

浅谈Android中的异步加载之ListView中图片的缓存及优化三

     隔了很久没写博客,现在必须快速脉动回来.今天我还是接着上一个多线程中的异步加载系列中的最后一个使用异步加载实现ListView中的图片缓存及其优化.具体来说这次是一个综合Demo.但是个人觉得里面还算有点价值的就是里面的图片的缓存的实现.因为老实说它确实能在实际的项目中得到很好的应用.主要学习来源于慕课网中的异步加载学习,来自徐宜生大神的灵感.本次也就是对大神所讲知识的一个总结及一些个人的感受吧. 这次是一个综合的Demo,主要里面涉及到的知识主要有:网络编程.异步加载.JSON解析.

Android之ListView异步加载图片且仅显示可见子项中的图片

折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整实例都没看到,只有自己一点点研究了,总体感觉 android 下面要显示个图片真不容易啊. 项目主要实现的功能: 异步加载图片图片内存缓存.异步磁盘文件缓存解决使用 viewHolder 后出现的图片错位问题优化列表滚动性能,仅显示可见子项中的图片无需固定图片显示高度,对高度进行缓存使列表滚动时不会

iOS多线程自定义operation加载图片 不重复下载图片

摘要:1:ios通过抽象类NSOperation封装了gcd,让ios的多线程变得更为简单易用:   2:耗时的操作交给子线程来完成,主线程负责ui的处理,提示用户的体验   2:自定义operation继承自NSOperation,在子线程中下载图片: 3:保证图片只下载一次,还有保证下载任务不重复 ------------------------------------------------------------------------------------ 实现原理:1:图片缓存:用

Android:ViewPager扩展详解——带有导航的ViewPagerIndicator(附带图片缓存,异步加载图片)

大家都用过viewpager了, github上有对viewpager进行扩展,导航风格更加丰富,这个开源项目是ViewPagerIndicator,很好用,但是例子比较简单,实际用起来要进行很多扩展,比如在fragment里进行图片缓存和图片异步加载. 下面是ViewPagerIndicator源码运行后的效果,大家也都看过了,我多此一举截几张图: 下载源码请点击这里 ===========================================华丽的分割线==============

软引用SoftReference异步加载图片

HashMap<String, SoftReference<Drawable>> imageCache 关于SoftReference这个类多少知道些机制,会用就ok了. 机制:简单来说,她会帮助我们管理内存,防止内存溢出,另外一点也就相当于map,临时缓存些图片drawable让我们可以直接引用,很好了解决了OOM异常. 实现代码片段: [java]package com.Tianyou.Mobile.Common;  import java.io.IOException; im

[原创]cocos2dx加载网络图片&amp;异步加载图片

[动机] 之前看到一款卡牌游戏,当你要看全屏高清卡牌的时候,游戏会单独从网络上下载,本地只存了非高清的,这样可以省点包大小,所以我萌生了实现一个读取网络图片的类. [联想] 之前浏览网页的时候经常看到一张图片渐进(由模糊变清晰)的显示,如果在游戏中,诸如像显示高清卡牌的时候,使用有这种方式去显示一张图片,这样的体验应该会稍微好些 [相关知识] png interlaced:png图片在导出的时候是可以选择 interlaced (Adam7)的,这样的存储的png在网页上显示会渐进显示, 这种i

android listview 异步加载图片并防止错位

网上找了一张图, listview 异步加载图片之所以错位的根本原因是重用了 convertView 且有异步操作. 如果不重用 convertView 不会出现错位现象, 重用 convertView 但没有异步操作也不会有问题. 我简单分析一下: 当重用 convertView 时,最初一屏显示 7 条记录, getView 被调用 7 次,创建了 7 个 convertView. 当 Item1 划出屏幕, Item8 进入屏幕时,这时没有为 Item8 创建新的 view 实例, Ite