举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体验就不太好,而且浪费内存.
这个时候,我们就可以利用lazy加载技术,当界面滑动或者滑动减速的时候,都不进行图片加载,只有当用户不再滑动并且减速效果停止的时候,才进行加载.
刚开始我异步加载图片利用SDWebImage来做,最后试验的时候出现了重用bug,因为虽然SDWebImage实现了异步加载缓存,当加载完图片后再请求会直接加载缓存中的图片,注意注意注意,关键的来了,如果是lazy加载,滑动过程中是不进行网络请求的,cell上的图片就会发生重用,当你停下来能进行网络请求的时候,才会变回到当前Cell应有的图片,大概1-2秒的延迟吧(不算延迟,就是没有进行请求,也不是没有缓存的问题).怎么解决呢?这个时候我们就要在Model对象中定义个一个UIImage的属性,异步下载图片后,用已经缓存在沙盒中的图片路径给它赋值,这样,才cellForRowAtIndexPath方法中,判断这个UIImage对象是否为空,若为空,就进行网络请求,不为空,就直接将它赋值给cell的imageView对象,这样就能很好的解决图片短暂重用问题.
@下面我的代码用的是自己写的异步加载缓存类,SDWebImage的加载图片的懒加载,会在后面的章节给出.(为什么不同呢,因为SDWebImage我以前使用重来不关心它将图片存储在沙盒中的名字和路径,但是要实现懒加载的话,一定要得到图片路径,所以在找SDWebImage如何存储图片路径上花了点时间)
复制代码 代码如下:
@model类
import
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
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)
*/
}];
}
}