我們都知道iOS開發(fā)時(shí)UITabelView是使用頻率非常高的一個(gè)控件，圍繞它的性能優(yōu)化也有很多方法酪劫，這里先介紹其中一個(gè)優(yōu)化的點(diǎn)啊犬，蘋果官方也對這種優(yōu)化方法給出了一個(gè)示例工程扩所，大家也可以先下載下來看看效果：下載地址
先簡單總結(jié)一下這個(gè)方法思路就是：在tableView還在滾動(dòng)未停止的狀態(tài)下虎锚，不發(fā)起網(wǎng)絡(luò)請求去加載圖片。只有在tableView滾動(dòng)停止了才會(huì)去發(fā)起網(wǎng)絡(luò)請求加載當(dāng)前可見的cell里面的圖片衩婚，當(dāng)然如果這個(gè)圖片是已經(jīng)加載過的那也就不用再發(fā)起網(wǎng)絡(luò)請求了窜护。
其實(shí)大家之前在tableView的cell加載url image的時(shí)候肯定都有使用SDWebImage或者其他‘遠(yuǎn)程圖片子線程加載’庫或方法，這些庫或方法都會(huì)在子線程去下載指定url的圖片資源非春，下載完成再回主線程刷新界面柱徙。這已經(jīng)能夠?qū)⑾鄬臅r(shí)的圖片網(wǎng)絡(luò)請求都放到子線程去做缓屠，不要影響主線程刷新界面。
而現(xiàn)在要介紹的圖片懶加載的方式就是在此基礎(chǔ)上更加優(yōu)化一步护侮，你想一想如果我的tableview里有很多行數(shù)據(jù)敌完，在過高速滾動(dòng)的時(shí)候系統(tǒng)會(huì)‘瘋狂’調(diào)用UITableViewDataSource那些方法，我們就瘋狂地在子線程發(fā)起一大堆圖片網(wǎng)絡(luò)請求羊初，雖然說是在子線程里滨溉，但是一下加入大量的請求道子線程對性能多少還是會(huì)有點(diǎn)影響，另外用戶在滾動(dòng)的時(shí)候也說明用戶對當(dāng)前顯示行的內(nèi)容不感興趣长赞，所以也沒有必要去發(fā)起請求浪費(fèi)用戶流量晦攒。只有當(dāng)用戶停止?jié)L動(dòng)了才去請求當(dāng)前顯示行的圖片資源。
工程講解
接下來我們就用上面提到的蘋果官方示例工程來簡單解釋一下這個(gè)方法的實(shí)現(xiàn)過程得哆。打開上面剛下載的LazyTableImages工程脯颜，直接進(jìn)到RootViewController這個(gè)類去看就可以了。
RootViewController就是這個(gè)示例程序的主控制器贩据，在RootViewController.h頭文件中定義了一個(gè)叫entries數(shù)組
@property (nonatomic, strong) NSArray *entries;
這個(gè)entries數(shù)組就放著tableview每一行row的模型數(shù)據(jù)栋操，它是在AppDelegate的程序啟動(dòng)時(shí)的方法里就發(fā)起的請求，請求回來之后就將數(shù)據(jù)轉(zhuǎn)模型然后傳給這個(gè)Controller饱亮。
每一行的模型數(shù)據(jù)是AppRecord類示例矾芙，AppRecord類屬性如下：
@interface AppRecord : NSObject
@property (nonatomic, strong) NSString *appName;
@property (nonatomic, strong) UIImage *appIcon;
@property (nonatomic, strong) NSString *artist;
@property (nonatomic, strong) NSString *imageURLString;
@property (nonatomic, strong) NSString *appURLString;
@end
剛請求回來的時(shí)候只有這行數(shù)據(jù)圖片的url地址叫做imageURLString，當(dāng)這個(gè)圖片被請求回來了就將圖片對象設(shè)置給appIcon屬性里近尚，下次再顯示這個(gè)行時(shí)候看到有圖片對象就不用請求了蠕啄。
好的，現(xiàn)在就將目標(biāo)放到最重要的幾個(gè)tableView的方法上去戈锻，先看到最主要cellForRowAtIndexPath方法歼跟，這個(gè)方法大家都知道在tableView滾動(dòng)時(shí)候系統(tǒng)會(huì)瘋狂的調(diào)用，讓你返回要顯示的cell對象給他格遭。請看下面方法和注解哈街，只要重點(diǎn)看那個(gè)if else的else里面的代碼和注釋就可以了，這個(gè)if else只是用來判斷模型數(shù)據(jù)是否請求回來了拒迅，沒有則顯示一個(gè)正在loading的cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = nil;
//計(jì)算當(dāng)前數(shù)據(jù)模型的數(shù)組entries的數(shù)量
NSUInteger nodeCount = self.entries.count;
if (nodeCount == 0 && indexPath.row == 0) {
cell = [tableView dequeueReusableCellWithIdentifier:PlaceholderCellIdentifier forIndexPath:indexPath];
} else {
//重點(diǎn)是這個(gè)else后面的Ｉ亍！ｈ滴ⅰＷ鞴俊！Ｇ傲颉０谩！Ｒ俚纭＝捉！Ｔ狙病！Ｄ脸睢Ｋ匦啊！
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if (nodeCount > 0)
{
//取出在這個(gè)位置cell對象的模型數(shù)據(jù)
AppRecord *appRecord = (self.entries)[indexPath.row];
//將數(shù)據(jù)文字傳給cell的Label顯示
cell.textLabel.text = appRecord.appName;
cell.detailTextLabel.text = appRecord.artist;
//判斷當(dāng)前模型數(shù)據(jù)是否已經(jīng)有圖片對象了(即判斷是否這個(gè)數(shù)據(jù)的圖片已經(jīng)請求過了)
if (!appRecord.appIcon)
{
//判斷當(dāng)前tableView是否在滾動(dòng)中（這個(gè)方法里最重要的一句判斷）
if (self.tableView.dragging == NO &&
self.tableView.decelerating == NO)
{
//如果tableView又未再滾動(dòng)中猪半，即在停止住狀態(tài)下則調(diào)用開始下載圖片的方
[self startIconDownload:appRecord forIndexPath:indexPath];
}
//不管tableView是否在滾動(dòng)中兔朦，是否要去下載圖片，都先將本地的默認(rèn)占位圖顯示上去
cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];
}
else
{
//如果這個(gè)數(shù)據(jù)的圖片已經(jīng)請求過了办龄，那么直接顯示圖片即可
cell.imageView.image = appRecord.appIcon;
}
}
}
return cell;
}
好的烘绽，看完了這個(gè)方法我們就去看看在上面這個(gè)方法里調(diào)用的那個(gè)開始下載圖片的方法是怎么實(shí)現(xiàn)的，請看下面方法和注解：
- (void)startIconDownload:(AppRecord *)appRecord forIndexPath:(NSIndexPath *)indexPath
{
//控制器有一個(gè)imageDownloadsInProgress的字典屬性俐填，用來保存對應(yīng)indexPath位置的IconDownloader(圖片下載器)對象
//先判斷是否已經(jīng)有當(dāng)前indexPath的圖片下載器對象安接，如果有則說明這個(gè)位置之前已經(jīng)開始了下載動(dòng)作，不用重復(fù)開始了
//IconDownloader是這個(gè)工程自定義的下載圖片的類英融，你可以去看看它的實(shí)現(xiàn)盏檐，也可以不用管
IconDownloader *iconDownloader = (self.imageDownloadsInProgress)[indexPath];
if (iconDownloader == nil)
{
//如果沒有則創(chuàng)建一個(gè)IconDownloader
iconDownloader = [[IconDownloader alloc] init];
//將當(dāng)前位置的數(shù)據(jù)模型傳給IconDownloader
//IconDownloader內(nèi)部一會(huì)就會(huì)根據(jù)這個(gè)模型對象的圖片url地址去下載
iconDownloader.appRecord = appRecord;
//設(shè)置IconDownloader下載完成后的回調(diào)block
[iconDownloader setCompletionHandler:^{
//先取到對應(yīng)indexPath位置的cell
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
//讓cell顯示模型數(shù)據(jù)新下載到的圖片對象
//appRecord的appIcon圖片對象的賦值在IconDownloader內(nèi)部就自動(dòng)完成了
cell.imageView.image = appRecord.appIcon;
//將這個(gè)完成下載的IconDownloader從控制器的imageDownloadsInProgress字典里移除掉
[self.imageDownloadsInProgress removeObjectForKey:indexPath];
}];
//將這個(gè)準(zhǔn)備開始下載圖片的IconDownloader加入到控制器的imageDownloadsInProgress字典里
(self.imageDownloadsInProgress)[indexPath] = iconDownloader;
//開始下載圖片
[iconDownloader startDownload];
}
}
如果你覺得這樣子就完工了那就錯(cuò)了！Ｊ晃颉胡野！
因?yàn)楦鶕?jù)現(xiàn)在這兩個(gè)方法的實(shí)現(xiàn)還只能讓tableView在滾動(dòng)的時(shí)候不發(fā)起圖片加載請求，還不能讓tableView停止時(shí)候去加載當(dāng)前顯示行的圖片痕鳍，現(xiàn)在我們要想想在哪里可以知道tableView停止了呢硫豆？
肯定是UIScrollViewDelegate方法啦！UITableView是繼承UIScrollView的嘛笼呆。請看下面兩個(gè)代理方法實(shí)現(xiàn)和注釋：
//用戶停止拖動(dòng)了scrollView(手指結(jié)束拖拽動(dòng)作離開屏幕了)熊响，準(zhǔn)備開始減速滾動(dòng)時(shí)會(huì)調(diào)用
//由于慣性，用戶手指離開屏幕后還會(huì)繼續(xù)滾動(dòng)一會(huì)诗赌，這個(gè)decelerate(減速)就是指這個(gè)后續(xù)的滾動(dòng)狀態(tài)
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
//判斷是否已經(jīng)停止減速了
if (!decelerate)
{
//調(diào)用加載當(dāng)前顯示行圖片方法
[self loadImagesForOnscreenRows];
}
}
//scrollView停止減速后會(huì)調(diào)用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//調(diào)用加載當(dāng)前顯示行圖片方法
[self loadImagesForOnscreenRows];
}
可以看到這個(gè)兩個(gè)代理方法很簡單汗茄，我們就是為了定位到tableView停止?jié)L動(dòng)的那一刻，然后就簡單調(diào)用了加載當(dāng)前顯示行圖片的方法铭若。
接下來再看最后一個(gè)方法和注釋洪碳，就是加載當(dāng)前顯示行圖片：
- (void)loadImagesForOnscreenRows
{
//判斷模型數(shù)據(jù)是否為空，為空說明模型數(shù)據(jù)都還沒請求回來叼屠，也就不畢繼續(xù)加載圖片動(dòng)作
if (self.entries.count > 0)
{
//獲取當(dāng)前屏幕上可以見所有行對應(yīng)的indexPath位置組成的數(shù)組
NSArray *visiblePaths = [self.tableView indexPathsForVisibleRows];
//遍歷所有位置
for (NSIndexPath *indexPath in visiblePaths)
{
//取到對應(yīng)位置的模型數(shù)據(jù)
AppRecord *appRecord = (self.entries)[indexPath.row];
//判斷這個(gè)模型數(shù)據(jù)是否已經(jīng)有圖片對象了瞳腌，如果有說明已經(jīng)下載過了
if (!appRecord.appIcon)
{
//如果還未下載過則去開始下載對應(yīng)行的圖片
[self startIconDownload:appRecord forIndexPath:indexPath];
}
}
}
}
至此這個(gè)示例工程最主要的幾個(gè)方法就講解完了，大家應(yīng)該對這個(gè)官方建議的優(yōu)化方法理解了吧镜雨。當(dāng)然tableView還有很多其他值得優(yōu)化的地方和方法纯趋，不過這個(gè)其實(shí)也要具體情況具體分析，不用為了優(yōu)化而優(yōu)化。
這個(gè)內(nèi)容來加載的方法也不一定要局限于UITableView或圖片吵冒，我覺得很多用了UIScrollView復(fù)雜界面都可以借鑒使用這個(gè)方法
