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

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

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

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

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

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

效果如下：

具体实现思路如下：

AsynImageView.h的文件内容：

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中的文件内容：

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"）

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

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

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