有关请求相同地址图片的下载问题(SDWebIMage底层原理的实现)

有关网络相同地址图片的下载问题,小弟根据SDWebImage的底层实现 总结如下几点,也是对第三方框架的学习之外更是觉得对第三方的一种间接,不能知其然而不知其所以然.在此分享,如有不同之处,忘各大书友指点迷津!

• 例如tableView中的cell中药显示的图片,例如用户在下拉或者在上拉的时候图片下载不能都每次都申请服务器重新加载,这时候我们就需要利用资源对已下载的图片进行管理,小弟参照SDWebImage的底层抽取大概的意思分如下几点.

• 一. 首先对要求的图片是否存在?

• 二. 对存在的图片下载在子线程上进行?

• 三. 下载是否完成,以及对下载的操作的处理?

• 四. 对于下载的操作完成以及图片的存储问题?

第一步: 想到图片不能重复发送请求给服务器下载图片,就应该想到字典,利用键值对的形式来存储,利用下载图片的URL为键, UIImage 为值. 判断图片有无,如有字典中有图片的话直接设置cell的图片

第二步:如果在图片没有的话 这时候就该下载图片,这时候下载图片应该放到子线程进行异步加载,就会开启新的线程,但是在开启新线程之后刷新UI最后会回到主线程上进行.

第三步:在对存在下载图片的时候 图片的下载完成也是一个问题,例如图片太大有100M 但是用户等待不了那么久时间又开始往下拖动,这时候下载的图片还是未下载完,这时候就该想到利用自定义一个缓存池操作的字典用来存储操作,利用下载图片的URL为键, Operations 为值.

第四步:利用每次下载图片的操作来判断图片是否为第一次下载还是下载未完成状态,对于第一次下载的时候直接开启新线程去下载然后将下载的图片保存在图片字典中,并且将操作从操作字典中移除(PS:由于图片比较多,有时候需要清除,这时候如果清除图片没有将操作移除的话将永远下载不到对应URL的图片),在下载不完全的时候及可以设置未下载完全的占位图片用来显示没有下载完成的图片即可.

/**

• 定义字典保存下载好的图片
• key 图片的地址 value 图片UIImage
  */
  @property (nonatomic, strong) NSMutableDictionary *images;

/**

• 定义字典保存下载操作
• key 图片地址 value 下载操作
  */
  @property (nonatomic, strong) NSMutableDictionary *operations;

实现底层的实现!

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
}

// 1.根据下载地址去字典中取图片
UIImage *image = self.images[@"http://www.baidu/abc.png""];

// 2.判断字典中是否有图片(是否已经下载过图片)
if (image == nil) {
    // 没有下载过(1.从来没有下载过, 2.没有下载完,正在下载中)
    
    NSOperation *operation =self.operations[@"http://www.baidu/abc.png"];
    if (operation == nil) {
        // 1.从来没有下载过
        // 创建操作
        operation = [NSBlockOperation blockOperationWithBlock:^{
            NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.baidu/abc.png"]];
            UIImage *image = [UIImage imageWithData:imageData];
            
            // 将下载好的图片存储到字典中
            self.images[@"http://www.baidu/abc.png""] = image;
            
            // 将操作从字典中移除
            self.operations[@"http://www.baidu/abc.png""] = nil;
            
            // 回到主线程更新UI
            dispatch_async(dispatch_get_main_queue(), ^{
                cell.imageView.image = image;
            });
        }];
        // 将操作放入队列,会自动开辟一个线程
        [self.queue addOperation:operation];
        

        
        // 将操作添加到字典中
        self.operations[@"http://www.baidu/abc.png"] = operation;
        
    }else
    {
        // 2.没有下载完,正在下载中
        cell.imageView.image = [UIImage imageNamed:@"占位图片"];
    }
    
    
}else
{
    // 已经下载过
    cell.imageView.image = image;
}

return cell;
}

对于更新第二次SDWebIMage底层对于图片访问沙盒机制的存贮

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"app";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    WKApp *app = self.apps[indexPath.row];
    cell.textLabel.text = app.name;
    cell.detailTextLabel.text = app.download;
    
    // 先从内存缓存中取出图片
    UIImage *image = self.images[app.icon];
    if (image) { // 内存中有图片
        cell.imageView.image = image;
    } else {  // 内存中没有图片
        // 获得Library/Caches文件夹
        NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
        // 获得文件名
        NSString *filename = [app.icon lastPathComponent];
        // 计算出文件的全路径
        NSString *file = [cachesPath stringByAppendingPathComponent:filename];
        // 加载沙盒的文件数据
        NSData *data = [NSData dataWithContentsOfFile:file];
        
        if (data) { // 直接利用沙盒中图片
            UIImage *image = [UIImage imageWithData:data];
            cell.imageView.image = image;
            // 存到字典中
            self.images[app.icon] = image;
        } else { // 下载图片
            cell.imageView.image = [UIImage imageNamed:@"placeholder"];
            
            NSOperation *operation = self.operations[app.icon];
            if (operation == nil) { // 这张图片暂时没有下载任务
                operation = [NSBlockOperation blockOperationWithBlock:^{
                    // 下载图片
                    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
                    // 数据加载失败
                    if (data == nil) {
                        // 移除操作
                        [self.operations removeObjectForKey:app.icon];
                        return;
                    }
                    
                    UIImage *image = [UIImage imageWithData:data];
                    
                    // 存到字典中
                    self.images[app.icon] = image;
                    
                    // 回到主线程显示图片
                    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                        [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
                    }];
                    
                    // 将图片文件数据写入沙盒中
                    [data writeToFile:file atomically:YES];
                    // 移除操作
                    [self.operations removeObjectForKey:app.icon];
                }];
                
                // 添加到队列中
                [self.queue addOperation:operation];
                
                // 存放到字典中
                self.operations[app.icon] = operation;
            }
        }
    }
    
    return cell;
}

以下为图解

SDWimage底层2.png

SDWebimage底层1.png

记得SDWebImage 还有其他类型的缓存问题,希望各位书友能够在此帖中表述出一起学习!

iOS技术成长群:255032637 有愿意的小伙伴可以长期学习共勉!