占位图像
占位图像
// 0. 占位图像
UIImage *placeholder = [UIImage imageNamed:@"user_default"];
cell.imageView.image = placeholder;
问题
- 因为使用的是系统提供的 cell
- 每次和 cell 交互,
layoutSubviews
方法会根据图像的大小自动调整imageView
的尺寸
解决办法
- 自定义 Cell
自定义 Cell
cell.nameLabel.text = app.name;
cell.downloadLabel.text = app.download;
// 异步加载图像
// 0. 占位图像
UIImage *placeholder = [UIImage imageNamed:@"user_default"];
cell.iconView.image = placeholder;
// 1. 定义下载操作
NSBlockOperation *downloadOp = [NSBlockOperation blockOperationWithBlock:^{
// 1. 模拟延时
NSLog(@"正在下载 %@", app.name);
[NSThread sleepForTimeInterval:0.5];
// 2. 异步加载网络图片
NSURL *url = [NSURL URLWithString:app.icon];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:data];
// 3. 主线程更新 UI
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
cell.iconView.image = image;
}];
}];
// 2. 将下载操作添加到队列
[self.downloadQueue addOperation:downloadOp];
问题
-
如果网络图片下载速度不一致,同时用户滚动图片,可能会出现图片显示"错行"的问题
-
修改延时代码,查看错误
// 1. 模拟延时
if (indexPath.row > 9) {
[NSThread sleepForTimeInterval:3.0];
}
上下滚动一下表格即可看到 cell 复用的错误
解决办法
- MVC