为了提高用户体验，我们可以在collectionView 或者 tableView加载数据的时候，在cell上添加一张占位图片；数据加载完成时，显示图片。本文以collectionView为例，tableView也同样使用。
- 首先我们用到的是SDWebImage第三方框架，可以直接下载，也可cocoaPods下载安装
- 创建工程 进入Bulid Phases-->Link Binary With Libraries, 点击'+',引入框架:ImageIO.framework, MapKit.framework, libxml2.2.dylib
- 进入Bulid Setting , 在搜索栏搜索other link, 修改Other Linker Flags为-ObjC
- 在plist文件中设置网络
- 导入SDWebImage.h的头文件
创建一个全局变量数组 imgArr
从Google上找图片地址 图片会加载不出来（原因还不知道，希望有知道原因的大神给小的留言）
- (NSArray *)imgArr
{
_imgArr = [[NSArray alloc]init];
_imgArr = @[@"http://e.hiphotos.baidu.com/image/h%3D200/sign=e592c9a3bb1bb0519024b4280678da77/d6ca7bcb0a46f21ff2ec9bd2fe246b600d33ae53.jpg",
@"http://hiphotos.baidu.com/%B3%F5%BC%B6%BE%D1%BB%F7%CA%D6/pic/item/929b56443840bfc6b3b7dc64.jpg",
@"http://img0.imgtn.bdimg.com/it/u=4037780041,4066468437&fm=21&gp=0.jpg",
@"http://pic9.nipic.com/20100916/2531170_115406925268_2.jpg",
@"http://img.taopic.com/uploads/allimg/130711/318756-130G1222R317.jpg",
@"http://pic26.nipic.com/20121217/9252150_110558501000_2.jpg",
@"http://img.taopic.com/uploads/allimg/130710/267873-130G011000550.jpg",
@"http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg",
@"http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg",
@"http://www.taopic.com/uploads/allimg/110812/1820-110Q20HA296.jpg",
@"http://pica.nipic.com/2008-03-11/2008311112935830_2.gif",
@"http://scimg.jb51.net/allimg/160805/103-160P511403X58.jpg",
@"http://pic27.nipic.com/20130201/1773545_002859086000_2.jpg",
@"http://img4.imgtn.bdimg.com/it/u=1906744648,758477532&fm=21&gp=0.jpg",
@"http://img0.imgtn.bdimg.com/it/u=1785055732,4047702060&fm=21&gp=0.jpg",
@"http://pic24.nipic.com/20121029/5056611_120019351000_2.jpg"];
return _imgArr;
}
collectionView的创建就不在说了，直接上重点代码
新版本的SDWebImage方法新都有"sd_"的前缀.
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
NSURL *url = [NSURL URLWithString:_imgArr [indexPath.row]];
cell.backgroundView = [[UIView alloc]initWithFrame:self.view.bounds];
UIImageView *imageV = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
//1. 基本语句, 异步加载及缓存图片一步到位
[imgView sd_setImageWithURL: url placeholderImage: [UIImageimageNamed:@"3"]];
[cell.backgroundView addSubview:imageV];
return cell;
}
运行之后，相同三张图片的就是占位图片
屏幕快照 2016-09-23 下午4.01.43.png
在说一下SDWebImage的其他用法：
1--基本语句, 异步加载及缓存图片一步到位
[imgView sd_setImageWithURL: url placeholderImage: [UIImageimageNamed:@"3"]];
2--读取缓存, 有占位图片, 可从url下载图片
//Handle image refresh（控制图像刷新）
默认情况下，SDWebImage确实非常积极的缓存。它忽略了所有类型的通过HTTP服务器返回的缓存控制头，并且没有时间限制地缓存返回的图像。这意味着你的图像url是永远不会改变的、指向图像的静态url。如果指向的图片发生了变化，那么url也会相应的跟着变化。如果你不控制你的图像服务器，当它的内容更新时你不能改变它的url。Facebook头像就是这种情况的例子。在这种情况下，你可以使用SDWebImageRefreshCached的标志。这将稍微降低性能，但将会考虑到HTTP缓存控制头：
[imgView sd_setImageWithURL:url placeholderImage:[UIImageimageNamed:@"3"] options:SDWebImageRefreshCached];
3--block
[imgView sd_setImageWithURL:url completed:^(UIImage *image, NSError*error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image) {
imgView.image = image;
}
}];
4--管理
SDWebImageManager *imageManager = [SDWebImageManagersharedManager];
[imageManager downloadImageWithURL:url options:0progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSError *error, SDImageCacheTypecacheType, BOOL finished, NSURL *imageURL) {
if (image) {
imgView.image = image;
}
}];
5--使用blocks，你将被告知下载进度，完成时是成功还是失败：
[imgView sd_setImageWithURL:url placeholderImage:[UIImageimageNamed:@"3"] completed:^(UIImage *image, NSError *error,SDImageCacheType cacheType, NSURL *imageURL) {
if (error) {
NSLog(@"%@", error);
}
}];
6--独立地使用异步图像下载
[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:urloptions:0 progress:^(NSInteger receivedSize, NSIntegerexpectedSize) {
} completed:^(UIImage *image, NSData *data, NSError *error, BOOLfinished) {
if (image && finished) {
imgView.image = image;
}
}];
网友评论