lazy懒加载(延迟加载)UITableView
举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体验就不太好,而且浪费内存.
这个时候,我们就可以利用lazy加载技术,当界面滑动或者滑动减速的时候,都不进行图片加载,只有当用户不再滑动并且减速效果停止的时候,才进行加载.
刚开始我异步加载图片利用SDWebImage来做,最后试验的时候出现了重用bug,因为虽然SDWebImage实现了异步加载缓存,当加载完图片后再请求会直接加载缓存中的图片,注意注意注意,关键的来了,如果是lazy加载,滑动过程中是不进行网络请求的,cell上的图片就会发生重用,当你停下来能进行网络请求的时候,才会变回到当前Cell应有的图片,大概1-2秒的延迟吧(不算延迟,就是没有进行请求,也不是没有缓存的问题).怎么解决呢?这个时候我们就要在Model对象中定义个一个UIImage的属性,异步下载图片后,用已经缓存在沙盒中的图片路径给它赋值,这样,才cellForRowAtIndexPath方法中,判断这个UIImage对象是否为空,若为空,就进行网络请求,不为空,就直接将它赋值给cell的imageView对象,这样就能很好的解决图片短暂重用问题.
@下面我的代码用的是自己写的异步加载缓存类,SDWebImage的加载图片的懒加载,会在后面的章节给出.(为什么不同呢,因为SDWebImage我以前使用重来不关心它将图片存储在沙盒中的名字和路径,但是要实现懒加载的话,一定要得到图片路径,所以在找SDWebImage如何存储图片路径上花了点时间)
模型类：
@model类 #import <Foundation/Foundation.h> @interface NewsItem : NSObject @property (nonatomic,copy) NSString * newsTitle; @property (nonatomic,copy) NSString * newsPicUrl; @property (nonatomic,retain) UIImage * newsPic; // 存储每个新闻自己的image对象 - (id)initWithDictionary:(NSDictionary *)dic; // 处理解析 + (NSMutableArray *)handleData:(NSData *)data; @end #import "NewsItem.h" #import "ImageDownloader.h" @implementation NewsItem - (void)dealloc { self.newsTitle = nil; self.newsPicUrl = nil; self.newsPic = nil; [super dealloc]; } - (id)initWithDictionary:(NSDictionary *)dic { self = [super init]; if (self) { self.newsTitle = [dic objectForKey:@"title"]; self.newsPicUrl = [dic objectForKey:@"picUrl"]; //从本地沙盒加载图像 ImageDownloader * downloader = [[[ImageDownloader alloc] init] autorelease]; self.newsPic = [downloader loadLocalImage:_newsPicUrl]; } return self; } + (NSMutableArray *)handleData:(NSData *)data; { //解析数据 NSError * error = nil; NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error]; NSMutableArray * originalArray = [dic objectForKey:@"news"]; //封装数据对象 NSMutableArray * resultArray = [NSMutableArray array]; for (int i=0 ;i<[originalArray count]; i++) { NSDictionary * newsDic = [originalArray objectAtIndex:i]; NewsItem * item = [[NewsItem alloc] initWithDictionary:newsDic]; [resultArray addObject:item]; [item release]; } return resultArray; } @end
图片下载类：
@图片下载类 #import <Foundation/Foundation.h> @class NewsItem; @interface ImageDownloader : NSObject @property (nonatomic,copy) NSString * imageUrl; @property (nonatomic,retain) NewsItem * newsItem; //下载图像所属的新闻 //图像下载完成后，使用block实现回调 @property (nonatomic,copy) void (^completionHandler)(void); //开始下载图像 - (void)startDownloadImage:(NSString *)imageUrl; //从本地加载图像 - (UIImage *)loadLocalImage:(NSString *)imageUrl; @end #import "ImageDownloader.h" #import "NewsItem.h" @implementation ImageDownloader - (void)dealloc { self.imageUrl = nil; Block_release(_completionHandler); [super dealloc]; } #pragma mark - 异步加载 - (void)startDownloadImage:(NSString *)imageUrl { self.imageUrl = imageUrl; // 先判断本地沙盒是否已经存在图像，存在直接获取，不存在再下载，下载后保存 // 存在沙盒的Caches的子文件夹DownloadImages中 UIImage * image = [self loadLocalImage:imageUrl]; if (image == nil) { // 沙盒中没有，下载 // 异步下载,分配在程序进程缺省产生的并发队列 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ // 多线程中下载图像 NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]]; // 缓存图片 [imageData writeToFile:[self imageFilePath:imageUrl] atomically:YES]; // 回到主线程完成UI设置 dispatch_async(dispatch_get_main_queue(), ^{ //将下载的图像，存入newsItem对象中 UIImage * image = [UIImage imageWithData:imageData]; self.newsItem.newsPic = image; //使用block实现回调，通知图像下载完成 if (_completionHandler) { _completionHandler(); } }); }); } } #pragma mark - 加载本地图像 - (UIImage *)loadLocalImage:(NSString *)imageUrl { self.imageUrl = imageUrl; // 获取图像路径 NSString * filePath = [self imageFilePath:self.imageUrl]; UIImage * image = [UIImage imageWithContentsOfFile:filePath]; if (image != nil) { return image; } return nil; } #pragma mark - 获取图像路径 - (NSString *)imageFilePath:(NSString *)imageUrl { // 获取caches文件夹路径 NSString * cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]; // 创建DownloadImages文件夹 NSString * downloadImagesPath = [cachesPath stringByAppendingPathComponent:@"DownloadImages"]; NSFileManager * fileManager = [NSFileManager defaultManager]; if (![fileManager fileExistsAtPath:downloadImagesPath]) { [fileManager createDirectoryAtPath:downloadImagesPath withIntermediateDirectories:YES attributes:nil error:nil]; } #pragma mark 拼接图像文件在沙盒中的路径,因为图像URL有"/",要在存入前替换掉,随意用"_"代替 NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"]; NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName]; return imageFilePath; } @end 复制代码 代码如下: @这里只给出关键代码,网络请求,数据处理,自定义cell自行解决 #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // Return the number of sections. return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. if (_dataArray.count == 0) { return 10; } return [_dataArray count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellIdentifier = @"Cell"; NewsListCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier ]; if (!cell) { cell = [[[NewsListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease]; } NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; cell.titleLabel.text = item.newsTitle; //判断将要展示的新闻有无图像 if (item.newsPic == nil) { //没有图像下载 cell.picImageView.image = nil; NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating); // 执行的时机与次数问题 if (self.tableView.dragging == NO && self.tableView.decelerating == NO) { [self startPicDownload:item forIndexPath:indexPath]; } }else{ //有图像直接展示 NSLog(@"1111"); cell.picImageView.image = item.newsPic; } cell.titleLabel.text = [NSString stringWithFormat:@"indexPath.row = %ld",indexPath.row]; return cell; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [NewsListCell cellHeight]; } //开始下载图像 - (void)startPicDownload:(NewsItem *)item forIndexPath:(NSIndexPath *)indexPath { //创建图像下载器 ImageDownloader * downloader = [[ImageDownloader alloc] init]; //下载器要下载哪个新闻的图像，下载完成后，新闻保存图像 downloader.newsItem = item; //传入下载完成后的回调函数 [downloader setCompletionHandler:^{ //下载完成后要执行的回调部分，block的实现 //根据indexPath获取cell对象，并加载图像 #pragma mark cellForRowAtIndexPath-->没看到过 NewsListCell * cell = (NewsListCell *)[self.tableView cellForRowAtIndexPath:indexPath]; cell.picImageView.image = downloader.newsItem.newsPic; }]; //开始下载 [downloader startDownloadImage:item.newsPicUrl]; [downloader release]; } - (void)loadImagesForOnscreenRows { #pragma mark indexPathsForVisibleRows-->没看到过 //获取tableview正在window上显示的cell，加载这些cell上图像。通过indexPath可以获取该行上需要展示的cell对象 NSArray * visibleCells = [self.tableView indexPathsForVisibleRows]; for (NSIndexPath * indexPath in visibleCells) { NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; if (item.newsPic == nil) { //如果新闻还没有下载图像，开始下载 [self startPicDownload:item forIndexPath:indexPath]; } } } #pragma mark - 延迟加载关键 //tableView停止拖拽，停止滚动 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { //如果tableview停止滚动，开始加载图像 if (!decelerate) { [self loadImagesForOnscreenRows]; } NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate); } - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { //如果tableview停止滚动，开始加载图像 [self loadImagesForOnscreenRows]; }
下拉刷新和上拉加载的原理
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来.
下面是关键代码分析:
// 下拉刷新的原理 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView { if (scrollView.contentOffset.y < - 100) { [UIView animateWithDuration:1.0 animations:^{ // frame发生偏移,距离顶部150的距离(可自行设定) self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f); } completion:^(BOOL finished) { /** * 发起网络请求,请求刷新数据 */ }]; } } // 上拉加载的原理 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { NSLog(@"%f",scrollView.contentOffset.y); NSLog(@"%f",scrollView.frame.size.height); NSLog(@"%f",scrollView.contentSize.height); /** * 关键--> * scrollView一开始并不存在偏移量,但是会设定contentSize的大小,所以contentSize.height永远都会比contentOffset.y高一个手机屏幕的 * 高度;上拉加载的效果就是每次滑动到底部时,再往上拉的时候请求更多,那个时候产生的偏移量,就能让contentOffset.y + 手机屏幕尺寸高大于这 * 个滚动视图的contentSize.height */ if (scrollView.contentOffset.y + scrollView.frame.size.height >= scrollView.contentSize.height) { NSLog(@"%d %s",__LINE__,__FUNCTION__); [UIView commitAnimations]; [UIView animateWithDuration:1.0 animations:^{ // frame发生的偏移量,距离底部往上提高60(可自行设定) self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0); } completion:^(BOOL finished) { /** * 发起网络请求,请求加载更多数据 * 然后在数据请求回来的时候,将contentInset改为(0,0,0,0) */ }]; } }
下面详细说一下cell下载图片的思路(无沙盒缓存)
1、创建两个字典，一个用来缓存图片images，一个用来缓存下载图片的操作operations；
2、这两个字典都是用图片的url链接作为键key；
3、当需要显示单元格图片前，首先判断images字典中是否已经存在下载好的图片，如果存在，直接显示图片即可，如果不存在，那么就先放一张占位图片；
4、此时，再判断operations字典中的下载操作是否存在，如果不存在，就创建一个现在图片的操作并添加到队列中执行，下载图片成功后，将图片保存到images字典中，然后回到主线程刷新UI，显示新的图片(占位图片消失)。切记，不管图片是否下载成功，一定要将这个下载图片的操作operations
字典中删除，目的有三个：
——1——防止图片下载操作没有成功，而这个操作却被保留了下来,那么其他单元格的图片就会nil
——2——防止operations字典会一直累加，如果图片数量大，会给内存增加负担
——3——每一次cell的刷新都会重新创建下载操作下载对应的图片
5、在内存出现警告时，需要处理的操作：
-(void)didReceiveMemoryWarining{
[super didReceiveMemoryWarining];
//取消所有操作
[self.queue cancelAllOperations];
//清空字典
[self.operations removeAllObjects];
[self.images removeAllObjects];
}
6、为了提高用户体验，节约流量和时间,
所以在用户拖拽开始时应该挂起图片下载操作 [self.queue setSuspended:YES];
拖拽结束后启动图片下载操作 [self.queue setSuspended:NO];
这是sdWebImage的基本思路，只不过sdWebImage用的是沙盒存储。
还有就是，刷新单元格时，必须刷新指定的单元格即可，即[self.tableView reloadRowsAtIndexPaths:@[IndexPath] withRowAnimation:UITableViewRowAnimationNone];
无沙盒缓存时：
[图片]
沙盒缓存时：
[图片]
7、存入沙盒时，一张图片必须对应一个文件，存到Caches文件下。
UIImage ——> data——>file
※存取图片：
PNG图片：
NSData *data = UIImagePNGRepresentation(image);
[data writeToFile:CachesfileName atomically:YES]
JPG图片：
NSData *data = UIImageJPGRepresentation(image,1.0);
[data writeToFile:CachesfileName atomically:YES]；
※获取图片：
NSData *data = [NSData dataWithContentsOfFile:CachesfileName];
if(data){
cell.imageView.image = [UIImage imageWithData:data];
}
else{
显示占位图片；
下载图片；
}
一般情况下，自定义operation类，在该自定义类的重写main方法执行下载任务(对象创建后会自动调用main方法)，然后通过设置协议和代理方法将图片传到主控制器的主线程中刷新UI，极大的简化了代码。
直接省去block，没有循环引用的问题
SDWebImage的默认缓存时长是一个星期
原文：http://www.cnblogs.com/XYQ-208910/p/5127902.html