UIImageView是iOS开发中经常用到的控件，通过UIImageView来加载显示网络图片更是很常遇到的场景之一。如何加载显示网络图片，提高用户体验度，我们可以通过多种途径来实现：苹果原生api，SDWebImage，其他第三方库等，这里我结合NSCache以及磁盘缓存实现了一个自己封装的UIImageView库。
直接说重点，一个好的图片缓存库大概应该包含以下几点：
- 异步判断是否有缓存，有就解压缩图片，返回主线程刷新UI（不卡主线程，提高用户体验）。
- 无缓存，异步下载图像，尽可能减少使用主线程队列。
- 下载成功，后台解压缩图像，返回主线程刷新UI；同时在内存和磁盘上缓存图像，并且保存解压过的图片到内存中，以避免再次解压。
- 可使用GCD 和 blocks，使得代码更加高效和简单。
- 如果可以，最好在下载后以及存入到缓存前对图像进行处理（裁剪、压缩、拉伸等）
-
缓存类的实现
包括内存缓存和磁盘缓存，内存缓存通过NSCache实现。NSCache 是苹果官方提供的缓存类，用法与 NSMutableDictionary 的用法很相似， 在收到系统内存警告时，NSCache会自动释放一些对象，它是线程安全的，在多线程操作中，不需要对NSCache加锁，另外NSCache的Key只是做强引用，不需要实现NSCopying协议。
// 初始化内存缓存 NSCache
_memCache = [[NSCache alloc] init];
//设置10兆的内存缓存作为二级缓存，先读内存，内存没有再读文件
_memCache.totalCostLimit = 1024102410;
totalCostLimit表示缓存空间的最大总成本，超出上限会自动回收对象（默认值是 0，表示没有限制）。
从内存读取图片缓存：
- (UIImage *)getImageFromMemoryCache:(NSString *)uri
{
UIImage *result = nil;
result = [_memCache objectForKey:uri];
return result;
}
存入内存缓存：
- (void)saveMemoryCache:(NSData )data uri:(NSString )uri decoded:(BOOL)decoded
{
if (data==nil ||uri==nil){
return;
}
//大于一兆的数据就不要放进内存缓存了,不然内存紧张会崩溃)
if (data.length >102410241){
return;
}//对于jpg,png图片，将data转为UIImage再存到内存缓存，不用每次获时再执行imageWithData这个非常耗时的操作。 if (data!=nil){ @try { UIImage *image=[UIImage imageWithData:data]; UIImage *resultImage = nil; //png图片不执行decoded if (decoded && ![CJImageViewCache isPNGImage:data]) { resultImage = [CJImageViewCache decodedImageWithImage:image]; } if (nil == resultImage) { resultImage = image; } NSInteger dataSize= resultImage.size.width * resultImage.size.height * resultImage.scale; [_memCache setObject:resultImage forKey:uri cost:dataSize]; } @catch (NSException *exception) { NSLog(@"exception=%@",exception); } } }
这里说一下，在图片存入内存前预先进行decodedImageWithImage:可以提高图片的显示效率，但是经测试发现如果图片是.png格式时，是无法decoded的，所以这里做多了一个判读，当图片是png格式时则忽略decoded。关于如何判断图片，我们可以通过根据文件头来判断图片是否为png格式。
-
磁盘缓存
从磁盘读取缓存
- (UIImage *)getImageFromDiskCache:(NSString *)uri decoded:(BOOL)decoded
{
UIImage *image = nil;
NSData *data = [NSData dataWithContentsOfFile:[self cachePath:uri]];
if (data) {
image = [UIImage imageWithData:data];
//png图片不执行decoded
if (decoded && ![CJImageViewCache isPNGImage:data]){
image = [CJImageViewCache decodedImageWithImage:image];
}
if (image) {
CGFloat cost = image.size.height * image.size.width * image.scale;
[self.memCache setObject:image forKey:uri cost:cost];
}
}
return image;
}
缓存路径的判断:
- (NSString *)cachePath:(NSString *)relaPath
{
// nil 安全判断
if (relaPath != nil && relaPath.length > 0) {
const char *str = [relaPath UTF8String];
if (str == NULL) {
str = "";
}
unsigned char r[16];
CC_MD5(str, (CC_LONG)strlen(str), r);
NSString *filename = [NSString stringWithFormat:@"%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x",
r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10], r[11], r[12], r[13], r[14], r[15]];
return [_diskCachePath stringByAppendingPathComponent:filename];
}
return nil;
}
其中_diskCachePath为图片缓存路径（fullNameSpace是自定义字符串）
//图片缓存路径
_diskCachePath = [paths[0] stringByAppendingPathComponent:fullNamespace];
将数据写入磁盘缓存
- (void)saveDiskCache:(NSData *)imageData uri:(NSString *)uri
{
UIImage *image = [UIImage imageWithData:imageData];
NSData *data = imageData;
if ([CJImageViewCache isPNGImage:imageData]) {
data = UIImagePNGRepresentation(image);
}
else {
data = UIImageJPEGRepresentation(image, (CGFloat)1.0);
}if (data) { @synchronized(_fileManager) { if (![_fileManager fileExistsAtPath:_diskCachePath]) { [_fileManager createDirectoryAtPath:_diskCachePath withIntermediateDirectories:YES attributes:nil error:NULL]; } if ([_fileManager fileExistsAtPath:[self cachePath:uri]]) { [_fileManager removeItemAtPath:[self cachePath:uri] error:nil]; } [_fileManager createFileAtPath:[self cachePath:uri] contents:data attributes:nil]; // NSLog(@"_diskCachePath = %@",_diskCachePath); } } }
_fileManager在初始化时实现
_fileManager = [NSFileManager defaultManager];
另外缓存类还实现了清除缓存，清除指定缓存，获取缓存大小等方法，这里就不再细说了，大家可以下载demo 看看。
-
CJImageView图片加载类
图片加载过程：判断是否有缓存；有缓存直接显示缓存图片；无缓存先显示默认图片，开始请求网络，加载期间可选是否显示加载菊花，加载成功停止loading动画，显示网络图片，并保存缓存。
/**
* 加载图片，设置默认图，显示加载菊花，设置加载菊花样式，图片是否decoded
*
* @param uri
* @param image
* @param showIndicator
* @param style 默认UIActivityIndicatorViewStyleGray
* @param decoded 是否decoded
*/
- (void)setUri:(NSString *)uri defaultImage:(UIImage *)image showIndicator:(BOOL)showIndicator style:(UIActivityIndicatorViewStyle)style decoded:(BOOL)decoded
{
__weak __typeof(self) wSelf = self;
dispatch_async([self getImageOperatorQueue], ^(){
UIImage * resultImage = [[CJImageViewCache sharedImageCache]getImageFromCache:uri decoded:decoded];
if (resultImage != nil) {
dispatch_async_main_queue(^{
wSelf.image = resultImage;
});
}else{
//获取缓存失败，请求网络
[wSelf loadImageData:uri defaultImage:image showIndicator:showIndicator style:style decoded:decoded];
}
});
}
请求网络使用了我之前发表的CJHttpClient库，这里由于CJImageView实现了自己的网络缓存，所以网络请求时使用忽略缓存协议：CJRequestIgnoringLocalCacheData
- (void)loadImageData:(NSString *)uri defaultImage:(UIImage *)image showIndicator:(BOOL)showIndicator style:(UIActivityIndicatorViewStyle)style decoded:(BOOL)decoded
{
self.style = style;
self.url = uri;
__weak typeof(self) wSelf = self;
//先显示默认图片
dispatch_async_main_queue(^{
wSelf.image = image;
});if (showIndicator) { if (!_loadingInducator) { UIActivityIndicatorView *tempIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:self.style]; self.loadingInducator = tempIndicator; CGFloat minFloat = MIN(self.frame.size.width, self.frame.size.height); CGFloat inducatorMaxFloat = MAX(tempIndicator.frame.size.width, tempIndicator.frame.size.height); if (minFloat/inducatorMaxFloat < 2) { self.loadingInducator.transform = CGAffineTransformScale(self.loadingInducator.transform, 0.6, 0.6); } } self.loadingInducator.activityIndicatorViewStyle = self.style; self.loadingInducator.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2); dispatch_async_main_queue(^{ [wSelf addSubview:wSelf.loadingInducator]; [wSelf bringSubviewToFront:wSelf.loadingInducator]; [wSelf.loadingInducator startAnimating]; }); } [CJHttpClient getUrl:uri parameters:nil timeoutInterval:HTTP_DEFAULT_TIMEOUT cachPolicy:CJRequestIgnoringLocalCacheData completionHandler:^(NSData *data, NSURLResponse *response){ __strong __typeof(wSelf)strongSelf = wSelf; //保存缓存 [[CJImageViewCache sharedImageCache] saveCache:data uri:uri decoded:decoded]; dispatch_async([self getImageOperatorQueue], ^(){ if ([[response.URL absoluteString] isEqualToString:self.url]) { UIImage * dataImage = [UIImage imageWithData:data]; UIImage * resultImage = nil; if (decoded && ![CJImageViewCache isPNGImage:data]) { resultImage = [CJImageViewCache decodedImageWithImage:dataImage]; } dispatch_async_main_queue(^{ strongSelf.image = resultImage != nil?resultImage:(dataImage != nil?dataImage:image); [strongSelf.loadingInducator stopAnimating]; [strongSelf sendSubviewToBack:strongSelf.loadingInducator]; }); } }); }errorHandler:^(NSError *error){ __strong __typeof(wSelf)strongSelf = wSelf; dispatch_async_main_queue(^{ strongSelf.image = image; [strongSelf.loadingInducator stopAnimating]; [strongSelf sendSubviewToBack:strongSelf.loadingInducator]; }); }]; }
最后是demo地址。
