ios UITableView 异步加载图片并防止错位
UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况
对错位原因不明白的同学请参考我的另外一篇随笔：http://www.cnblogs.com/lesliefang/p/3619223.html 。
当然大多数情况下可以用 SDWebImage, 这个库功能强大，封装的很好。但自己重头来写可能对问题理解的更深。
SDWebImage 有点复杂，很多人也会参考一下封装出一套适合自己的类库。
基本思路如下：
1 扩展(category) UIImageView, 这样写出的代码更整洁
2 GCD 异步下载
3 重用 UITableViewCell 加异步下载会出现图片错位，所以每次 cell 渲染时都要预设一个图片 (placeholder)，
以覆盖先前由于 cell 重用可能存在的图片, 同时要给 UIImageView 设置 tag 以防止错位。
4 内存 + 文件 二级缓存， 内存缓存基于 NSCache
暂时没有考虑 cell 划出屏幕的情况，一是没看明白 SDWebImage 是怎么判断滑出屏幕并 cancel 掉队列中对应的请求的
二是我觉得用户很多情况下滑下去一般还会滑回来，预加载一下也挺好。坏处是对当前页图片加载性能上有点小影响。
关键代码如下：
1 扩展 UIImageView
@interface UIImageView (AsyncDownload) // 通过为 ImageView 设置 tag 防止错位 // tag 指向的永远是当前可见图片的 url， 这样通过 tag 就可以过滤掉已经滑出屏幕的图片的 url @property NSString *tag; - (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder; @end #import "UIImageView+AsyncDownload.h" @implementation UIImageView (AsyncDownload) - (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder{ // 给 ImageView 设置 tag, 指向当前 url self.tag = [url absoluteString]; // 预设一个图片，可以为 nil // 主要是为了清除由于复用以前可能存在的图片 self.image = placeholder; if (url) { // 异步下载图片 LeslieAsyncImageDownloader *imageLoader = [LeslieAsyncImageDownloader sharedImageLoader]; [imageLoader downloadImageWithURL:url complete:^(UIImage *image, NSError *error, NSURL *imageURL) { // 通过 tag 保证图片被正确的设置 if (image && [self.tag isEqualToString:[imageURL absoluteString]]) { self.image = image; }else{ NSLog(@"error when download:%@", error); } }]; } } @end
2 GCD 异步下载， 封装了一个 单例 下载类
@implementation LeslieAsyncImageDownloader +(id)sharedImageLoader{ static LeslieAsyncImageDownloader *sharedImageLoader = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedImageLoader = [[self alloc] init]; }); return sharedImageLoader; } - (void)downloadImageWithURL:(NSURL *)url complete:(ImageDownloadedBlock)completeBlock{ LeslieImageCache *imageCache = [LeslieImageCache sharedCache]; NSString *imageUrl = [url absoluteString]; UIImage *image = [imageCache getImageFromMemoryForkey:imageUrl]; // 先从内存中取 if (image) { if (completeBlock) { NSLog(@"image exists in memory"); completeBlock(image,nil,url); } return; } // 再从文件中取 image = [imageCache getImageFromFileForKey:imageUrl]; if (image) { if (completeBlock) { NSLog(@"image exists in file"); completeBlock(image,nil,url); } // 重新加入到 NSCache 中 [imageCache cacheImageToMemory:image forKey:imageUrl]; return; } // 内存和文件中都没有再从网络下载 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ NSError * error; NSData *imgData = [NSData dataWithContentsOfURL:url options:NSDataReadingMappedIfSafe error:&error]; dispatch_async(dispatch_get_main_queue(), ^{ UIImage *image = [UIImage imageWithData:imgData]; if (image) { // 先缓存图片到内存 [imageCache cacheImageToMemory:image forKey:imageUrl]; // 再缓存图片到文件系统 NSString *extension = [[imageUrl substringFromIndex:imageUrl.length-3] lowercaseString]; NSString *imageType = @"jpg"; if ([extension isEqualToString:@"jpg"]) { imageType = @"jpg"; }else{ imageType = @"png"; } [imageCache cacheImageToFile:image forKey:imageUrl ofType:imageType]; } if (completeBlock) { completeBlock(image,error,url); } }); }); } @end
3 内存 + 文件 实现二级缓存，封装了一个 单例 缓存类
@implementation LeslieImageCache +(LeslieImageCache*)sharedCache { static LeslieImageCache *imageCache = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ imageCache = [[self alloc] init]; }); return imageCache; } -(id)init{ if (self == [super init]) { ioQueue = dispatch_queue_create("com.leslie.LeslieImageCache", DISPATCH_QUEUE_SERIAL); memCache = [[NSCache alloc] init]; memCache.name = @"image_cache"; fileManager = [NSFileManager defaultManager]; NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES); cacheDir = [paths objectAtIndex:0]; } return self; } -(void)cacheImageToMemory:(UIImage*)image forKey:(NSString*)key{ if (image) { [memCache setObject:image forKey:key]; } } -(UIImage*)getImageFromMemoryForkey:(NSString*)key{ return [memCache objectForKey:key]; } -(void)cacheImageToFile:(UIImage*)image forKey:(NSString*)key ofType:(NSString*)imageType{ if (!image || !key ||!imageType) { return; } dispatch_async(ioQueue, ^{ // @"http://lh4.ggpht.com/_loGyjar4MMI/S-InbXaME3I/AAAAAAAADHo/4gNYkbxemFM/s144-c/Frantic.jpg" // 从 url 中分离出文件名 Frantic.jpg NSRange range = [key rangeOfString:@"/" options:NSBackwardsSearch]; NSString *filename = [key substringFromIndex:range.location+1]; NSString *filepath = [cacheDir stringByAppendingPathComponent:filename]; NSData *data = nil; if ([imageType isEqualToString:@"jpg"]) { data = UIImageJPEGRepresentation(image, 1.0); }else{ data = UIImagePNGRepresentation(image); } if (data) { [data writeToFile:filepath atomically:YES]; } }); } -(UIImage*)getImageFromFileForKey:(NSString*)key{ if (!key) { return nil; } NSRange range = [key rangeOfString:@"/" options:NSBackwardsSearch]; NSString *filename = [key substringFromIndex:range.location+1]; NSString *filepath = [cacheDir stringByAppendingPathComponent:filename]; if ([fileManager fileExistsAtPath:filepath]) { UIImage *image = [UIImage imageWithContentsOfFile:filepath]; return image; } return nil; } @end
4 使用
自定义 UITableViewCell
@interface LeslieMyTableViewCell : UITableViewCell @property UIImageView *myimage; @end @implementation LeslieMyTableViewCell - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { self.myimage = [[UIImageView alloc] init]; self.myimage.frame = CGRectMake(10, 10, 60, 60); [self addSubview:self.myimage]; } return self; }
cell 被渲染时调用
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *mycellId = @"mycell"; LeslieMyTableViewCell *mycell = [tableView dequeueReusableCellWithIdentifier:mycellId]; if (mycell == nil) { mycell = [[LeslieMyTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:mycellId]; } NSString *imageUrl = data[indexPath.row]; if (imageUrl!=nil && ![imageUrl isEqualToString:@""]) { NSURL *url = [NSURL URLWithString:imageUrl]; [mycell.myimage setImageWithURL:url placeholderImage:nil]; } return mycell; }
demo 地址：https://github.com/lesliebeijing/LeslieAsyncImageLoader.git
