效果图


常见问题及解决方法


  • 图片重复下载

    • 将内存保存在内存或沙盒中。
  • 若下载的图片量较大,则会出现UI界面不流畅的现象

    • 在子线程中执行下载操作,然后回到主线程成中进行UI界面的刷新。
  • 由于cell的循环利用造成的图片显示错乱问题

    • 指定刷新表格的indexPath行。
  • subTitle类型的cell,无法显示图片

    • subtitle类型的cell中的imageView只有在第一次返回cell时设置图片,否则图片将不能显示(刷新表格也不行)。可以通过设置占位图片的方式来解决此问题。

思维导图


具体实现


  • 其核心代码主要在tableView的返回创建cell的代理方法中,所以以下主要对该方法的实现进行解析

  • 主要流程

    • 设置模型类,包含以下属性

      /**图片*/
      @property (nonatomic, strong) NSString *icon;
      /**名字*/
      @property (nonatomic, strong) NSString *name;
      /**下载量*/
      @property (nonatomic, strong) NSString *download;
    • 需要用到的成员属性

      /**模型数组,用来存放每个cell的数据模型*/
      @property (nonatomic, strong) NSArray *apps;
      /**操作队列,操作只有添加到队列才有可能并发执行*/
      @property (nonatomic, strong) NSOperationQueue *queue;
      /**用于在内存中缓存图片,部分避免图片被多次下载*/
      @property (nonatomic, strong) NSMutableDictionary *imageCache;
      /**标记当前所有正在执行的操作,避免正在执行的操作被重复执行*/
      @property (nonatomic, strong) NSMutableDictionary *operations;
    • 创建cell的方法的核心代码

      • 从内存缓存中取图片

        //内存中缓存的图片在imagCache数组中
        self.imageCache[app.icon]
      • 从沙盒中取图片

        //获取文件路径
        NSString *cachePath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
        //获取文件名
        NSString *filename = [app.icon lastPathComponent];
        //计算出全路径
        NSString *file = [cachePath stringByAppendingPathComponent:filename];
        //加载沙盒中的数据
        NSData *data = [NSData dataWithContentsOfFile:file];
        //判断data中若有数据,否则从网络上下载数据
        if (data)
        {//沙盒中有数据
        UIImage *image = [UIImage imageWithData:data];
        cell.imageView.image = image;
        //存到字典中(即内存)
        self.imageCache[app.icon] = cell.imageView.image;
        }
      • 从网络上下载数据

        //若subTitle类型的cell要显示图片,必须在第一次放回cell时就显示图片(或占位图片)
        cell.imageView.image = [UIImage imageNamed:@"1"];
        //取得操作队列中的操作
        NSOperation *operation = self.operations[app.icon];
        if (operation == nil)
        {//不存在该图片的下载操作
        //创建下载图片操作
        operation = [NSBlockOperation blockOperationWithBlock:^{
        //通过url加载数据
        NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:app.icon]];
        //数据加载失败
        if (data == nil)
        {
        //移除操作,以便刷新表格时能够再次请求数据
        [self.operations removeObjectForKey:app.icon];
        return ;
        }
        //NSData转换为UIImage
        UIImage *image = [UIImage imageWithData:data];
        //存放到字典中
        self.imageCache[app.icon] = image;
        //线程睡眠,模拟大数据下载
        [NSThread sleepForTimeInterval:1];
        //回主线程显示图片
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        //通过indexPath刷新表格,此时内存缓存中已有图片
        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
        }];
        //将图片写入沙盒
        [data writeToFile:file atomically:YES];
        //移除操作,保证在刷新表格时可以重新下载没有下载的图片
        [self.operations removeObjectForKey:app.icon];
        }];
        //将操作添加到队列
        [self.queue addOperation:operation];
        //保证图片不被重复下载
        self.operations[app.icon] = operation;

通过第三方框架(SDWebImage)


  • SDWebImage可以大大简化多图下载任务
  • 通过扩展UIImageView的分类,在分类方法中实现多图下载功能,只给外部使用者暴露一个简单地网络接口
  • 包含分类头文件UIImageView+WebCache.h

  • 图片下载功能的实现

    • 方法一

      - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder
      /**
      url:图片的地址
      placeholder:占位图片
      */
    • 方法二

      - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock
      /**
      progressBlock:下载过程中的回调Block,可以在该Block中计算下载进度
      completedBlock:下载完毕的回调方法
      */
 
 

OC - 20.多图下载的更多相关文章

  1. iOS多线程-05-多图下载

    效果图 常见问题及解决方法 图片重复下载 将内存保存在内存或沙盒中. 若下载的图片量较大,则会出现UI界面不流畅的现象 在子线程中执行下载操作,然后回到主线程成中进行UI界面的刷新. 由于cell的循 ...

  2. thinkPHP框架5.0 类图下载

    thinkPHP5.0 类图下载

  3. 详解iOS多图下载的缓存机制

    1. 需求点是什么? 这里所说的多图下载,就是要在tableview的每一个cell里显示一张图片,而且这些图片都需要从网上下载. 2. 容易遇到的问题 如果不知道或不使用异步操作和缓存机制,那么写出 ...

  4. ios开发多线程四:NSOperation多图下载综合案例

    #import "ViewController.h" #import "XMGAPP.h" @interface ViewController () /** t ...

  5. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  6. JS生成gif动态图下载

    需求:通过动态变化的图生成一个gif图提供下载. 实现方案:1.可通过服务端生成对应gif,然后前端请求下载2.前端自己实现生成gif图片,自行下载 采用方案:前端实现方式,于是在网上找各种相关的几款 ...

  7. 2 万字 + 20张图| 细说 Redis 九种数据类型和应用场景

    作者:小林coding 计算机八股文网(操作系统.计算机网络.计算机组成.MySQL.Redis):https://xiaolincoding.com 大家好,我是小林. 我们都知道 Redis 提供 ...

  8. OC - GCD 队列组 - 下载图片画图

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ [self downloadIma ...

  9. OC 思维导向图

      iOS 扩展思维导向图,如下图所示:

随机推荐

  1. SCVMM和SQL分别建在不同服务器上报错:Error ID 319 during database creation on remote SQL Server

    问题发生了,测试过权限,帐号,服务,工具问题,均不是. 在微软网站找到解决办法. 就是MASTER.SQL的脚本在数据库服务器上单独运行. 然后,安装SCVMM时,不新建数据库,直接指现建好的库. 搞 ...

  2. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  3. 根据body的内容 查找h2标签的@class="subtitle"的值

    <pre name="code" class="html"><body class="api jquery listing" ...

  4. Curling 2.0(dfs)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8795   Accepted: 3692 Description On Pl ...

  5. updatepanel刷新后重新加载js脚本问题

    在页尾加 <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().a ...

  6. Linux下的定时器:alarm()与setitimer()

    Linux下的定时器有两种,以下分别介绍: 1.alarm 如果不要求很精确的话,用alarm()和signal()就够了 unsigned int alarm(unsigned int second ...

  7. 在ASP.Net MVC 中,如何在Global.asax中配置一个指向Area内部的默认Route

    ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...

  8. geopy使用详解

    由于专业需要,经常接触一些地理处理的工具包,文档都是英文的,自己看的同时将其翻译一下,一方面自己学习的同时有个记录,要是能同时给一起的学习的童鞋们一些帮助,想想也是极好的.以下的文档内容主要翻译自官方 ...

  9. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

  10. hdu 3062 2-sat入门题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3062 #include <cstdio> #include <cmath> # ...