swift 4 tableViewCell动态加载网络图片问题处理

1. 很多APP都会涉及到资讯或帖子或主题详情页的界面,其中就涉及到cell加载网络图片的开发问题.

2. 最容易想到的思路就是把URL直接传递给cell,让cell的imageView控件直接使用SDWebImage下载,然后去展示. 这个思路看似正常不过,但是会有问题.

问题1: cell下载好图片后如何更新, 更新逻辑处理不好容易形成死循环: 下载--更新--触发下载--有触发更新.....
问题2: 即使用一定方式如: 设置变量阻断死循环, 又会引发另一个问题-- cell的复用问题, 从网路下载的图片,尺寸都不一样,通过等比例缩放后,虽然等宽,但是高度都不相等, 多个cell展示多个图片的时候,滑动的时候会有复用的问题,导致图片高度出问题. 即使缓存了图片的高度也会出现其他问题

3. 只有另寻处理, 把图片的下载挪到controller中去处理, 利用SDWebImageDownloader下载图片, 利用SDImageCache去缓存下载的图片. 每次加载cell时,先判断SDImageCache缓存中有没有对应的图片,如果有取出来给cell展示, 如果没有就去下载, 下载利用SDImageCache去缓存, 然后更新下载的图片. 就完美解决了, cell动态加载图片的问题

1. 首先是自定义cell用来展示图片

import UIKitlet imageCellMargin:CGFloat = 15.0class ImageCell: UITableViewCell {// 无论加载成功和失败,都传递一张图片过来,加载成功传递下载的图片,加载失败传递占位图片var img: UIImage? {didSet {if let img = img {imgView.image = img//图片尺寸处理,这里仅仅简单等比例处理, 更复杂的图片尺寸处理不是本次讨论的重点let width = UIScreen.main.bounds.size.width - 2 * imageCellMarginlet height = img.size.height * (width / img.size.width)//更新图片尺寸imgView.snp.remakeConstraints { (make) inmake.top.equalTo(contentView.snp.top)make.height.equalTo(height).priority(900)make.left.equalTo(contentView.snp.left).offset(imageCellMargin)make.right.equalTo(contentView.snp.right).offset(-imageCellMargin)make.bottom.equalTo(contentView.snp.bottom).offset(-10)}}}}override init(style: UITableViewCellStyle, reuseIdentifier: String?) {super.init(style: style, reuseIdentifier: reuseIdentifier)contentView.addSubview(imgView)}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}//懒加载lazy var imgView:UIImageView = {let imgView = UIImageView()return imgView}()
}

2. tableView注册cell

3. tableView的数据源方法中处理cell

如果是图片的cell, 就调用配置cell的方法

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {## 设置复用标识reuseIdentifiervar reuseIdentifier = ""if () {reuseIdentifier = "reuseIdentifierOther"} else {reuseIdentifier = "reuseIdentifierImage"}## 根据判断条件创建celllet cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath)## 判断出不同类型的cellif () {} else {//图片setImageCell(imageCell: (cell as! ImageCell), indexPath: indexPath)}return = cell}//配置图片的方法func setImageCell(imageCell: ImageCell, indexPath: IndexPath) -> () {//取出对应的图片链接let imageUrl = imageUrlArr[indexPath.row - 2]//SDImageCache取出对应链接缓存的图片let cachedImage = SDImageCache.shared().imageFromDiskCache(forKey: "\(imageUrl)")if cachedImage == nil {//如果没有对应的缓存图片就去下载downLoadImage(imageUrl: imageUrl, indexPath: indexPath)//将占位图片传递过去imageCell.img = UIImage.init(named: "image_placeholder")} else {//如果能取出缓存的图片,就将取到的图片赋值过去展示imageCell.img = cachedImage}}//下载图片func downLoadImage(imageUrl: URL, indexPath: IndexPath) -> () {SDWebImageDownloader.shared().downloadImage(with: imageUrl, options: .useNSURLCache, progress: { (receivedSize, expectedSize, url) in//下载进度}) { (image, data, error, finished) in//下载完毕存储图片if error == nil {SDImageCache.shared().store(image, forKey: "\(imageUrl)", toDisk: true, completion: nil)DispatchQueue.main.async {self.performSelector(onMainThread: #selector(self.reloadImageCell(indexPath:)), with: indexPath, waitUntilDone: false)}} else {//针对其他情况处里return}}}//刷新func reloadImageCell(indexPath: IndexPath) -> () {self.tableView.reloadRows(at: [indexPath], with: .none)}

4. 效果

//下载好的图片

//占位图和已下载号的图片

swift 4 tableViewCell动态加载网络图片问题处理相关推荐

android listview动态加载网络图片不显示,Android Listview异步动态加载网络图片
Android Listview异步动态加载网络图片详见: http://blog.sina.com.cn/s/blog_62186b460100zsvb.html 标签: Android SDK ...
QQ 玩一玩获取用户图像昵称以及CocosCreator动态加载网络图片
文章目录 1.CocosCreator 加载图片的几种方式 2.QQ 玩一玩通过openId获取用户图像.昵称 3. 源码 QQ 玩一玩获取用户图像.昵称以及CocosCreator加载图片的几种方式 ...
flutter 轮播图动态加载网络图片
Swiper,网上很多列子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包flukit: ^1.0.0引用 im ...
iOS开发swift版异步加载网络图片(带缓存和缺省图片)
iOS开发之swift版异步加载网络图片与SDWebImage异步加载网络图片的功能相似,只是代码比较简单,功能没有SD的完善与强大,支持缺省添加图片,支持本地缓存. 异步加载图片的核心代码如下: ...
加载网络图片Glide+圆角 fragment的动态添加底部图标点击选中
一.加载网络图片Glide+圆角 1.添加网络请求. <uses-permission android:name="android.permiss ...
AFNetworking 之加载网络图片
AFNetworking 之加载网络图片我们平常用AF来进行网络请求,其实AF也可以作为轻量级的应用来请求网络图片哦.那么我们考虑一下AF是如何设计请求网络图片框架的呢? 1.入口封装的时候从UI ...
js 动态加载select触发事件
动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) {$.ajax({type: "po ...
cascader 动态加载回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...