为了省去制作图片的麻烦，我就直接拿YYWebImage里面的图片了，我个人也是建议使用这个图片框架来做渐进式下载。
先看下YYKit中做的效果图。
渐进式图片
图片加载很美观，用户体验性非常棒。当我第一次看到的时候，就兴奋的直接拿着代码去用，但是发现并不行，没有效果。后来查了资料才知道这种下载是有要求的。大家若测试，可以用我下面这个代码URL。
NSURL *url = [NSURL URLWithString:@"http://og3u5glro.bkt.clouddn.com/%E6%B8%90%E8%BF%9B%E5%BC%8F%E5%9B%BE%E7%89%87.jpg"];
[self.iconImageView yy_setImageWithURL:url
options:YYWebImageOptionProgressiveBlur];
但是，仅仅吃人家给的鱼干，远远满足不了我等对学习的渴望。于是，在和一个群友讨论后，决定自己写出这样的一个效果。
下面我先简单解释下图片格式
然后我会贴上自己实现这个渐进式下载的代码思路
最后当然是对你们来说最关心的，在文末我将提供一个简单的Demo。
言归正传，先来解释下，为什么你从百度随便弄一张图的链接放上去，但没有渐进式的下载效果。
实际上这和图片的格式支持有关。
一般来说我们碰到的图片大多都是Baseline JPEG这种格式的图片，我们也称为标准格式。然而渐进式图片下载，则需要Progressive JPEG这个格式，称之为渐进式，当然还有Interlaced格式等等，说到这里也许你已经明白了，是图片格式本身就不支持，不是代码没作用！下面说下这两个格式。
Baseline JPEG
标准格式的图片，是从上往下的方式逐行进行扫描。也就是看起来是一行一行的下载绘制，细心的同学会发现，YYWebImage里面就有这样的下载设置，代码如下：
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressive];
那看起来大概是这样的
上下扫描下载
Progressive JPEG
渐进式格式图片的扫描是多次的，再打开图片的过程中，先显示他的轮廓，在慢慢扫描绘制所有的色块，最终清晰。效果最上面大家已经看过了，这种技术被广泛应用于大图的下载显示上。
渐进式图片的一些小缺点：最初绘制的模糊图片，实际上与原图的大小有相差、这种绘制更加消耗CPU...
那么，这种图片如何制作呢？
很简单，在photoshop中有存储为web所用格式，打开后选择连续就是Progressive JPEG。
这样美观的渐进式下载，我如何实现呢？
图片解码需要用到这个框架处理
#import <ImageIO/ImageIO.h>
首先使用CGImageSourceCreateIncremental(NULL)创建图片源，然后在网络请求代理中拼接每次返回的图片data，使用CGImageSourceUpdateData更新图片数据，最后使用CGImageSourceCreateImageAtIndex来创建图片显示
其实过程就这么多，ok，贴上主要代码，运行看看效果。
@interface ViewController ()<NSURLSessionDelegate> {
NSMutableData * _recieveData;//当前下载date
long long _expectedLeght;//预估大小
CGImageSourceRef _incrementallyImgSource;
}
@property(nonatomic, strong) UIImageView *imageView;
/**
渐进式加载图片
*/
- (void)loadImage {
_incrementallyImgSource = CGImageSourceCreateIncremental(NULL);
_recieveData = [[NSMutableData alloc] init];
[self.view addSubview:self.imageView];
NSURL *url = [NSURL URLWithString:@"http://og3u5glro.bkt.clouddn.com/%E6%B8%90%E8%BF%9B%E5%BC%8F%E5%9B%BE%E7%89%87.jpg"];
NSURLSession *session=[NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]delegate:self delegateQueue:[NSOperationQueue mainQueue]];
NSURLRequest *request=[NSURLRequest requestWithURL:url];
NSURLSessionDataTask *task = [session dataTaskWithRequest:request];
[task resume];
}
// 1.接收到服务器的响应
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveResponse:(NSURLResponse *)response completionHandler:(void (^)(NSURLSessionResponseDisposition))completionHandler {
// 允许处理服务器的响应，才会继续接收服务器返回的数据
completionHandler(NSURLSessionResponseAllow);
_expectedLeght = response.expectedContentLength;
NSLog(@"_expectedLeght %lld",_expectedLeght);
}
// 2.接收到服务器的数据（可能调用多次）
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
[data enumerateByteRangesUsingBlock:^(const void *bytes, NSRange byteRange, BOOL *stop) {
[_recieveData appendBytes:bytes length:byteRange.length];
}];
BOOL isloadFinish = NO;
if (_expectedLeght == _recieveData.length) {
isloadFinish = YES;
}
CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, isloadFinish);
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);
UIImage *imageaa = [UIImage imageWithCGImage:imageRef];
self.imageView.image = imageaa;
CGImageRelease(imageRef);
NSLog(@"_recieveData %lu",(unsigned long)_recieveData.length);
}
效果图
yscrollsss.gif
可以看到，一个明显的下拉效果，仔细看确实是有了模糊到清晰的过程。可是这个下拉似乎不怎么好看啊，而且这个模糊效果真心不好，好像是太清晰了，这不是我们需要的优美的体验。
后面通过打印日志我发现，大概下载整张图片的0.12左右可以显示整个图片，那么就好办了。
//不希望出现下拉效果
if (_recieveData.length <= _expectedLeght*0.12) {
return;
}
在接收数据方法中直接限制图片绘制，这样解决了下拉。
那么，模糊效果不好怎么处理呢？我第一时间想到的就是，我要再加一层毛玻璃！以此获得更好的用户体验。
毛玻璃我采用#import <Accelerate/Accelerate.h>框架来做。
//毛玻璃处理
- (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur {
if (blur < 0.f || blur > 1.f) {
blur = 0.5f;
}
int boxSize = (int)(blur * 40);
boxSize = boxSize - (boxSize % 2) + 1;
CGImageRef img = image.CGImage;
vImage_Buffer inBuffer, outBuffer;
vImage_Error error;
void *pixelBuffer;
//从CGImage中获取数据
CGDataProviderRef inProvider = CGImageGetDataProvider(img);
CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
//设置从CGImage获取对象的属性
inBuffer.width = CGImageGetWidth(img);
inBuffer.height = CGImageGetHeight(img);
inBuffer.rowBytes = CGImageGetBytesPerRow(img);
inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
if(pixelBuffer == NULL)
NSLog(@"No pixelbuffer");
outBuffer.data = pixelBuffer;
outBuffer.width = CGImageGetWidth(img);
outBuffer.height = CGImageGetHeight(img);
outBuffer.rowBytes = CGImageGetBytesPerRow(img);
error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
if (error) {
NSLog(@"error from convolution %ld", error);
}
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast);
CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
//clean up CGContextRelease(ctx);
CGColorSpaceRelease(colorSpace);
free(pixelBuffer);
CFRelease(inBitmapData);
CGColorSpaceRelease(colorSpace);
CGImageRelease(imageRef);
return returnImage;
}
方法写好，那么调用看看吧！
// 2.接收到服务器的数据（可能调用多次）
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
[data enumerateByteRangesUsingBlock:^(const void *bytes, NSRange byteRange, BOOL *stop) {
[_recieveData appendBytes:bytes length:byteRange.length];
}];
BOOL isloadFinish = NO;
if (_expectedLeght == _recieveData.length) {
isloadFinish = YES;
}
//不希望出现下拉效果 同时避免数据太少毛玻璃绘制crash
if (_recieveData.length <= _expectedLeght*0.12) {
return;
}
CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, isloadFinish);
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);
UIImage *imageaa = [UIImage imageWithCGImage:imageRef];
CGFloat length = _expectedLeght;
CGFloat dataLength = _recieveData.length;
NSLog(@"....%f",dataLength/length);
self.imageView.image = [self boxblurImage:imageaa withBlurNumber:1-dataLength/length];
CGImageRelease(imageRef);
NSLog(@"_recieveData %lu",(unsigned long)_recieveData.length);
}
效果图，迫不及待~
为了看清下载效果，找的图片很大2.8M左右。
progress.gif
Gif制作不是很清晰，实际效果要比这个好很多。
有兴趣的同学可以去我GitHub下载这个Demo
既然说了这个图片下载，还有个动态图加载图片跟大家分享一下。
大致是这样的
animation.gif
在以前，我们都是放一张静态图的，当图片下载完成，更改图片，也就是著名的 PlaceholderImage 。如果我想放一张动态的placeholderImage怎么办？我推荐使用YYImage，实现步骤如下：
第一步：把你的imageView继承 YYAnimatedImageView(似乎不继承也可以，我记不清了)
第二步：
[self.iconImageView sd_setImageWithURL:[NSURL URLWithString:url]
placeholderImage:[YYImage imageNamed:@"placeImage.gif"]];
有一点不得不说：万恶的卡顿！虽然已经优化的不错了，但是仍然出现了偶尔轻微卡顿的情况，可能我有强迫症。总之，这样不能众享丝滑了。如果有老司机有办法一路滑下去，请带带我！
iOS技术交流群：511860085 欢迎加入！
最后放一张Progressive JPEG格式的图片
mew_progressive.jpg
网友评论