多图片下载缓存及SDWebImage

Posted 2020-07-17 悠然的南山

首先介绍一下如果不使用SDWebImage，自己写代码实现多图片的下载及缓存的思路：

这里只提供了一个思路作为了解，因为多图片下载、缓存的实现，使用三方SDWebImage特别的简单，以后开发过程中也是使用这种方式，不用自己写代码，所以这里只提供一个思路，关于SDWebImage的使用将在最后进行解释：

 

 1 //声明一个用来缓存图片的可变字典 imagesDict,字典的value值为图片，key值为图片网址
 2     //声明一个字典用来存储操作对象value值为（NSOperation *operation），key值为图片网址
 3     //声明一个队列对象queue用于多线程操作，子线程中下载，主线程中刷新UI
 4     UIImage *image = self.imagesDict[key];//首先从缓存中获取图片
 5     if (image) {//若缓存中存在图片
 6         cell.imageView.image = image;//加载图片
 7     }else {//若缓存中不存在图片，从本地沙盒中获取图片
 8         // 获得Library/Caches文件夹
 9         NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
10         // 获得文件名
11         NSString *filename = [key lastPathComponent];
12         // 计算出文件的全路径
13         NSString *file = [cachesPath stringByAppendingPathComponent:filename];
14         // 加载沙盒的文件数据
15         NSData *data = [NSData dataWithContentsOfFile:file];
16         if (data) {//若本地沙盒存在图片
17             UIImage *image = [UIImage imageWithData:data];
18             cell.imageView.image = image;//加载图片
19             // 存到字典中
20             self.imagesDict[key] = image;//并将图片放到缓存中，方便下次从缓存中直接加载
21         }else {//本地沙盒中还是没有，就要下载图片
22             cell.imageView.image = [UIImage imageNamed:@"placeholder"];//未下载之前显示占位图片
23             NSOperation *operation = self.operations[key];//操作队列
24             if (operation == nil) {//这张图片暂时没有下载任务
25                  operation = [NSBlockOperation blockOperationWithBlock:^{
26                 //下载该图片
27                 NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:key]];
28                 // 数据加载失败(网络超时等情况导致的图片加载失败)
29                 if (data == nil) {
30                     // 移除操作
31                     [self.operations removeObjectForKey:app.icon];
32                     return;
33                 }
34                 // 存到缓存中
35                 UIImage *image = [UIImage imageWithData:data];
36                 self.images[key] = image;
37                 // 回到主线程显示图片
38                 [[NSOperationQueue mainQueue] addOperationWithBlock:^{
39                     [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
40                 }];
41                 // 将图片文件数据写入沙盒中
42                 [data writeToFile:file atomically:YES];
43                 // 移除操作
44                 [self.operations removeObjectForKey:key];
45                }];
46                 // 添加到队列中
47                 [self.queue addOperation:operation];
48                 
49                 // 存放到缓存中
50                 self.operations[app.icon] = operation;
51                 
52             }
53         }
54 }

使用SDWebImage：

NSString *urlString = @"http://www.52ij.com/uploads/allimg/160317/1110104P8-4.jpg";
    //创建NSURL
    NSURL *imageURL = [NSURL URLWithString:urlString];
    //用网络上的图片设置MyImageView显示的图片
    //第一种：[self.MyImageView sd_setImageWithURL:imageURL];
    //第二种   block里面是加载完成后想做的事情
    //[self.MyImageView sd_setImageWithURL:imageURL completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
//        NSLog(@"图片加载完成");
//    }];
    //第三种   占位图
    //[self.MyImageView sd_setImageWithURL:imageURL placeholderImage:[UIImage imageNamed:@"22"]];
    //第四种
    //[self.MyImageView sd_setImageWithURL:imageURL placeholderImage:[UIImage imageNamed:@"22"] options:SDWebImageProgressiveDownload];
    [self.MyImageView sd_setImageWithURL:imageURL placeholderImage:[UIImage imageNamed:@"22"] options:SDWebImageProgressiveDownload progress:^(NSInteger receivedSize, NSInteger expectedSize) {
        NSLog(@"当前进度：%.lf%%", (float)receivedSize / expectedSize * 100);
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        NSLog(@"加载完成");
    }];
根据需求，选择上述四种方法中的任意一种，这里涉及到的缓存，本地沙盒存储，队列多线程等内容，已经在三方文件中实现了，我们只需要使用上面的四种方法即可。

另外：SDWebImage是一个很强大的三方，这里只是它加载web图片的功能，有兴趣的可以自己下载该三方，去研究里面的代码。第三方的最新版本可以使用CocoaPods,下载