ios开发UITableViewCell图片加载优化详解

目录
  • 前言
  • 图片自适应比例
  • XHWebImageAutoSize
  • 仅加载当前屏幕的内容
  • 预加载

前言

我们平时用UITableView用的很多,所以对列表的优化也是很关注的。很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFillclipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了。

那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢?

下面就让我们一起来探索吧。

图片自适应比例

一般我们的做法都是用UITableViewAutomaticDimension来实现的。

以往的做法,我们都是直接 sd_setImageWithURL 来实现添加图片,那现在也一样,我们也是通过这个来获取图片宽和高。

- (void)sd_setImageWithURL:(nullable NSURL *)url
          placeholderImage:(nullable UIImage *)placeholder
                 completed:(nullable SDExternalCompletionBlock)completedBlock

完成后,我们可以拿到UIImage,从而知道图片的 size 。然后我们就可以按比例来获取图片的高度,再通过更新约束来改变图片高度。

大概做法如下:

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL _Nullable imageURL) {
            if (image) {
                // 获取图片宽高
                CGSize imageSize = image.size;
                CGFloat maxWidth = kSCREEN_WIDTH - 32;
                // 按比例获取当前的高度
                CGFloat height = imageSize.height * maxWidth / imageSize.width;
                [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
                    make.height.mas_equalTo(height);
                }];
            }
        }];

然后我们一运行代码,发现图片的高度并没有展示我们想要的高度,可以说是连高度都没有。

很明显是图片的高度没有生效。想想也是,我们是异步调用加载图片的,这时候等异步结果回来调用mas_updateConstraints,并不会触发代理 heightForRowAtIndexPath,那怎么会更新高度呢。

既然是这样,那我们就重新加载该列表吧。

[cell setHeightBlock:^(CGFloat imageHeight){
    [tableView beginUpdates];
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
    [tableView endUpdates];
}];

我们更新完mas_updateConstraints后,这时候,直接刷新该列表,就可以解决问题了。

这时候我们重新运行,效果还可以,但在来回滚动的时候,发现有点卡。很明显,我们滚动的时候每次都要重新刷新cell

如果我们有缓存了,那就知道了图片的高度,那我们是不是就不需要reloadRowsAtIndexPaths

所以我再次进行优化

// 是否有缓存
BOOL hasCache = [[SDImageCache sharedImageCache] diskImageDataExistsWithKey:model.urlStr];
[_ImageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    if (image) {
        CGSize imageSize = image.size;
        CGFloat maxWidth = kSCREEN_WIDTH - 32;
        CGFloat height = imageSize.height * maxWidth / imageSize.width;
        [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(height);
        }];
         // 有缓存就不去reloadRowsAtIndexPaths
         if (!hasCache && self.heightBlock) {
             self.heightBlock(height);
         }
    }
}];

如果发现是有缓存图片了,我们就不刷新列表了。sd_setImageWithURL这时候也是从缓存里面读取图片,就不是异步加载了,所以不用再次刷新了当前cell了。

XHWebImageAutoSize

有的人说,这么写好像挺麻烦的,有没有封装好的写法,的确有的。

那就是第三方库 XHWebImageAutoSize,它的写法其实也是用了 SDWebImage 来进行优化操作的。

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    if (image) {
        /** 缓存image size */
        [XHWebImageAutoSize storeImageSize:image forURL:imageURL completed:^(BOOL result) {
            /** reload  */
            if(result && self.heightBlock) {
                self.heightBlock(0)
            }
        ];
    }
}];

缓存图片后,一样是去刷新cell。

[cell setHeightBlock:^(CGFloat imageHeight) {
    [tableView xh_reloadDataForURL:[NSURL URLWithString:model.urlStr]];
 }];

然后就是重新加载高度。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ImageModel *model = _dataArray[indexPath.row];
    return [XHWebImageAutoSize imageHeightForURL:[NSURL URLWithString:model.urlStr] layoutWidth:[UIScreen mainScreen].bounds.size.width-32 estimateHeight:200] + 50;
}

后面加的 50是其他的高度,例如cell里面还有title,就是图片+其他高度。

这样也能实现图片自适应高度。

仅加载当前屏幕的内容

图片列表实在太多了,一直滑滑滑,图片加载速度跟不上手速啊,感觉有点卡,我们可以仅加载当前屏幕的内容。滑动的时候,我们不加载,等列表停后,我们再次加载当前屏幕的内容。

这时候我们在模型model里面,添加一个isLoad的参数,如果是true,我们才加载。

先添加一个当前屏幕加载cell的方法。

-(void)loadCurrentCells{
    NSArray * array = [self.tableView indexPathsForVisibleRows];
    for (NSIndexPath *indexPath in array) {
        JJTableViewCell * cell = (JJTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
        ImageModel *model = _dataArray[indexPath.row];
        //设置为可以加载
        model.isLoad = YES;
       //配置cell
        [cell configCellWithImageModel:model];
    }
}

cell里面对modelisLoad进行判断。

- (void)configCellWithImageModel:(ImageModel *)model
{
    if (model.isLoad) {
        [_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr]];
    }else {
        _imageView.image = [UIImage imageNamed:@"default_images_icon"];
    }
}

如果暂不加载,我们可以先设置占用图片。

这样一来,我们只要监听停止滑动的时候,我们就设置加载当前页面的内容即可。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate) {
        [self loadCurrentCells];
    }
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self loadCurrentCells];
}

当然一开始我们reloaData的时候,所有isload都为false,所以我们需要加载一次当前cell内容。

[self.tableView reloadData];
[self loadCurrentCells];

这样,我们就可以做到一直滑动的时候,不异步加载图片,等滑动停止再加载当前屏幕的图片。

当然除了这种写法,我们还可以通过RunLoop来实现。

预加载

所谓预加载,就是一直滑动,我们翻页的时候,提前加载数据出来,让用户的感觉就是一直有数据。就没有出现上拉加载更多这种情况。

总体思路是:当滑动距离占比到了总滑动距离的时候的%90(不固定),就触发预加载。

这里我就不写了,直接把大佬的链接搞过来:iOS开发 TableView 网络请求/展示预加载

以上就是ios开发UITableViewCell图片加载优化详解的详细内容,更多关于ios UITableViewCell图片加载的资料请关注我们其它相关文章!

(0)

相关推荐

  • iOS优化UITableViewCell高度计算的一些事儿

    我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结. 我们也在维护一个开源的扩展,UITableView+FDTemplateLayoutCell,让高度计算这个事情变的前所未有的简单,也受到了很多星星的支持,github链接请戳我 (本地下载) 这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell

  • iOS tableView多输入框如何获取数据

    前言 难得有点空暇的时间,写写文章,一壶小茶,惬意.扯远了,言归正传. 大家在做App开发的时候,肯定遇到过在一个列表中有多个让用户填写资料的情况,类似于这样的界面: iOS 如果一个tableView中有很多的输入框,而且cell是复用的,这个还有个提交功能 我的设计思路是这样的 1.建立一个Model对象,包含要输入的所有字段, 2.在建立一个cell,有个label和textField, 3.在初始化cell的地方,根据不同的indexRow,显示cell上不同的label,例如昵称.邮箱

  • iOS开发TableView网络请求及展示预加载实现示例

    目录 引言 传统的上拉加载更多 滑动过程中预加载 方法1(最简单.高效和最推荐): 方法2(自己计算实现,不推荐了): 下面是具体实现细节(此细节是针对上述方法2的) 总结 引言 2022.02.11更新:新增了最简单.高效和最推荐的方法. 2020.05.25更新:对总结进行了详细的补充. 传统的上拉加载更多 在iOS的开发过程中,如果用列表展示数据,此时一般的逻辑为上拉加载更多数据,配合MJRefresh就是在滑动到最底部时,触发加载更多的网络请求. 滑动过程中预加载 如果希望体验好一点,那

  • iOS自定义UITableView实现不同系统下的左滑删除功能详解

    前言 在我们的app开发当中,经常会用到UITableView 的左滑删除的功能,通常的话效果如下 但有时候系统现有的功能并不能完全满足我们的开发需求,这样就需要我们在其现有的功能基础上自定义我们所需要的功能了.下图是在项目中自定义的按钮(只是修改了按钮的frame而已). 然后我就总结了一下根据不同的需求自定义不同的按钮. 一.系统默认左滑删除按钮 如果你对左滑删除按钮的要求不高,仅仅只是实现UITableView上cell的左滑删除功能,那在UITableView的代理方法中添加以下两种方法

  • iOS tableView右侧索引视图状态获取的方法实例

    前言 在iPhone和其他iOS的很多程序中都会看到Table View的出现,除了一般的表格资料展示之外,设置的属性资料往往也用到Table View,Table View主要分为以下两种: Plain:这是普通的列表风格  Grouped :这是分块风格. 本文介绍的是iOS tableView右侧索引视图状态获取的相关内容,下面来看正文 需求 一图胜千言! 在触摸右侧索引栏时 需要展示对应的组号名称 手指离开时消失 实现 通过Xcode查看视图层次结构 右侧索引视图的继承关系 是这样的:

  • iOS ScrollView嵌套tableView联动滚动的思路与最佳实践

    前言 随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商App十分常见.如下Demo图: 但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦.接下里我聊聊我们的实现思路. 思路和过程 对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollView,它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollView,容器上面才是各个页面具体

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

  • 基于js文件加载优化(详解)

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • Android开发之自定义加载动画详解

    目录 一.demo简介 二.分析贪吃动画的尺寸比例 三.画圆 四.实现张嘴闭嘴动画 五.小球移动动画 一.demo简介 1.效果展示如下图,我截了三个瞬间,但其实这是一个连续的动画,就是这个大圆不停地吞下小圆. 2.这个动画可以拆分为两部分,首先是大圆张嘴闭嘴的动画,相当于画一个圆弧,规定一下它的角度就好.小圆就是一个从右向左移动的动画.然后不停地刷新界面,让动画的持续时间为永恒,这样就会有一个持续的动态效果. 二.分析贪吃动画的尺寸比例 1.在制作动画之前,我们要先建一个模型,来确定一下大圆和

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • iOS中的UITableView的重用机制与加载优化详解

    UITableView可以说是UIKit中最重要的一个组件,用来展示数据列表,还可以灵活使用进行页面的布局.UITableView的使用遵循MVC模式,数据模型(NSObject).视图(UIView)和控制器(UITableViewController)分离.UITableView继承自UIScrollView,可上下滑动,可以作为跟视图也可以作为子视图组件. reuseIdentifier顾名思义是一个复用标识符,是一个自定义的独一无二的字符串,用来唯一地标记某种重复样式的可复用UITabl

  • React Native 混合开发多入口加载方式详解

    在已有app混合开发时,可能会有多个rn界面入口的需求,这个时候我们可以使用RCTRootView中的moduleName或initialProperties来实现加载包中的不同页面. 目前使用RCTRootView有两种方式: 使用initialProperties传入props属性,在React中读取属性,通过逻辑来渲染不同的Component 配置moduleName,然后AppRegistry.registerComponent注册同名的页面入口 这里贴出使用0.60.5版本中ios项目

  • Android Volley图片加载功能详解

    Gituhb项目 Volley源码中文注释项目我已经上传到github,欢迎大家fork和start. 为什么写这篇博客 本来文章是维护在github上的,但是我在分析ImageLoader源码过程中与到了一个问题,希望大家能帮助解答. Volley获取网络图片  本来想分析Universal Image Loader的源码,但是发现Volley已经实现了网络图片的加载功能.其实,网络图片的加载也是分几个步骤: 1. 获取网络图片的url. 2. 判断该url对应的图片是否有本地缓存. 3. 有

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • Android Fresco图片加载优化的方案

    优化背景 一般情况下,Fresco图片加载需使用SimpleDraweeView,这个控件并不能自动根据自身的尺寸按需加载图片,即一个 N×N 的UI控件,背后加载的实际图片可能是 2N×2N.这就导致了实际应用运行过程中的内存使用效率不高,需要针对其进行内存优化. 在一些入门级硬件设备上,表现得尤为明显,随着程序的运行时间的增长,OOM的风险也不断加大. Fresco版本:1.13.0 数据记录 声明控件大小为 480×270 <com.facebook.drawee.view.SimpleD

  • Vue openLayers实现图层数据切换与加载流程详解

    目录 openlayers介绍 一.实现效果预览 二.代码实现 openlayers介绍 OpenLayers是一个用于开发WebGIS客户端的JavaScript包.OpenLayers 支持的地图来源包括Google Maps.Yahoo. Map.微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择.OpenLayers采用面向对象方式开发. OpenLayers 是一个专

随机推荐