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)
*/
}];
}
}
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论