iOS---tableview載入圖片的時候的最佳化之lazy(懶載入)模式and非同步載入模式

iOS---tableview載入圖片的時候的最佳化之lazy(懶載入)模式and非同步載入模式

舉個例子,當我們在用網易新聞App時,看著那麼多的新聞,並不是所有的都是我們感興趣的,有的時候我們只是很快的滑過,想要快速的略過不喜歡的內容,但是只要滑動經過了,圖片就開始載入了,這樣使用者體驗就不太好,而且浪費記憶體.

這個時候,我們就可以利用lazy載入技術,當介面滑動或者滑動減速的時候,都不進行圖片載入,只有當使用者不再滑動並且減速效果停止的時候,才進行載入.

剛開始我非同步載入圖片利用SDWebImage來做,最後實驗的時候出現了重用bug,因為雖然SDWebImage實現了非同步載入緩衝,當載入完圖片後再請求會直接載入緩衝中的圖片,注意注意注意,關鍵的來了,如果是lazy載入,滑動過程中是不進行網路請求的,cell上的圖片就會發生重用,當你停下來能進行網路請求的時候,才會變回到當前Cell應有的圖片,大概1-2秒的延遲吧(不算延遲,就是沒有進行請求,也不是沒有緩衝的問題).怎麼解決呢?這個時候我們就要在Model對象中定義個一個UIImage的屬性,非同步下載圖片後,用已經緩衝在沙箱中的圖片路徑給它賦值,這樣,才cellForRowAtIndexPath方法中,判斷這個UIImage對象是否為空白,若為空白,就進行網路請求,不為空白,就直接將它賦值給cell的imageView對象,這樣就能很好的解決圖片短暫重用問題.

@下面My Code用的是自己寫的非同步載入緩衝類,SDWebImage的載入圖片的懶載入,原理差不多.

 

@model類#import @interface NewsItem : NSObject@property (nonatomic,copy) NSString * newsTitle;@property (nonatomic,copy) NSString * newsPicUrl;@property (nonatomic,retain) UIImage * newsPic; //  儲存每個新聞自己的image對象- (id)initWithDictionary:(NSDictionary *)dic;//  處理解析+ (NSMutableArray *)handleData:(NSData *)data;@end#import "NewsItem.h"#import "ImageDownloader.h"@implementation NewsItem- (void)dealloc{self.newsTitle = nil;self.newsPicUrl = nil;self.newsPic = nil;[super dealloc];}- (id)initWithDictionary:(NSDictionary *)dic{self = [super init];if (self) {self.newsTitle = [dic objectForKey:@"title"];self.newsPicUrl = [dic objectForKey:@"picUrl"];//從本地沙箱載入映像ImageDownloader * downloader = [[[ImageDownloader alloc] init] autorelease];self.newsPic = [downloader loadLocalImage:_newsPicUrl];}return self;}+ (NSMutableArray *)handleData:(NSData *)data;{//解析資料NSError * error = nil;NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];NSMutableArray * originalArray = [dic objectForKey:@"news"];//封裝資料對象NSMutableArray * resultArray = [NSMutableArray array];for (int i=0 ;i<[originalArray count]; i++) {NSDictionary * newsDic = [originalArray objectAtIndex:i];NewsItem * item = [[NewsItem alloc] initWithDictionary:newsDic];[resultArray addObject:item];[item release];}return resultArray;}@end

@圖片下載類#import @class NewsItem;@interface ImageDownloader : NSObject@property (nonatomic,copy) NSString * imageUrl;@property (nonatomic,retain) NewsItem * newsItem; //下載映像所屬的新聞//映像下載完成後，使用block實現回調@property (nonatomic,copy) void (^completionHandler)(void);//開始下載映像- (void)startDownloadImage:(NSString *)imageUrl;//從本地載入映像- (UIImage *)loadLocalImage:(NSString *)imageUrl;@end#import "ImageDownloader.h"#import "NewsItem.h"@implementation ImageDownloader- (void)dealloc{self.imageUrl = nil;Block_release(_completionHandler);[super dealloc];}#pragma mark - 非同步載入- (void)startDownloadImage:(NSString *)imageUrl{self.imageUrl = imageUrl;// 先判斷本地沙箱是否已經存在映像，存在直接擷取，不存在再下載，下載後儲存// 存在沙箱的Caches的子檔案夾DownloadImages中UIImage * image = [self loadLocalImage:imageUrl];if (image == nil) {// 沙箱中沒有，下載        // 非同步下載,分配在程式進程預設產生的並發隊列dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{// 多線程中下載映像NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]];            // 緩衝圖片[imageData writeToFile:[self imageFilePath:imageUrl] atomically:YES];            // 回到主線程完成UI設定dispatch_async(dispatch_get_main_queue(), ^{//將下載的映像，存入newsItem對象中UIImage * image = [UIImage imageWithData:imageData];self.newsItem.newsPic = image;//使用block實現回調，通知映像下載完成if (_completionHandler) {_completionHandler();}});});}}#pragma mark - 載入本地映像- (UIImage *)loadLocalImage:(NSString *)imageUrl{self.imageUrl = imageUrl;    // 擷取映像路徑NSString * filePath = [self imageFilePath:self.imageUrl];UIImage * image = [UIImage imageWithContentsOfFile:filePath];if (image != nil) {return image;}return nil;}#pragma mark - 擷取映像路徑- (NSString *)imageFilePath:(NSString *)imageUrl{// 擷取caches檔案夾路徑NSString * cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];// 建立DownloadImages檔案夾NSString * downloadImagesPath = [cachesPath stringByAppendingPathComponent:@"DownloadImages"];NSFileManager * fileManager = [NSFileManager defaultManager];if (![fileManager fileExistsAtPath:downloadImagesPath]) {[fileManager createDirectoryAtPath:downloadImagesPath withIntermediateDirectories:YES attributes:nil error:nil];}#pragma mark 拼接影像檔在沙箱中的路徑,因為映像URL有"/",要在存入前替換掉,隨意用"_"代替NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"];NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName];return imageFilePath;}@end

@這裡只給出關鍵代碼,網路請求,資料處理,自訂cell自行解決#pragma mark - Table view data source- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{    // Return the number of sections.    return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    // Return the number of rows in the section.    if (_dataArray.count == 0) {        return 10;    }    return [_dataArray count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{static NSString *cellIdentifier = @"Cell";NewsListCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier ];if (!cell) {cell = [[[NewsListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];}NewsItem * item = [_dataArray objectAtIndex:indexPath.row];cell.titleLabel.text = item.newsTitle;//判斷將要展示的新聞有無映像if (item.newsPic == nil) {//沒有映像下載cell.picImageView.image = nil;                NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating);        // ??執行的時機與次數問題if (self.tableView.dragging == NO && self.tableView.decelerating == NO) {[self startPicDownload:item forIndexPath:indexPath];}}else{//有映像直接展示        NSLog(@"1111");cell.picImageView.image = item.newsPic;}        cell.titleLabel.text = [NSString stringWithFormat:@"indexPath.row = %ld",indexPath.row];return cell;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return [NewsListCell cellHeight];}//開始下載映像- (void)startPicDownload:(NewsItem *)item forIndexPath:(NSIndexPath *)indexPath{//建立映像下載器ImageDownloader * downloader = [[ImageDownloader alloc] init];//下載器要下載哪個新聞的映像，下載完成後，新聞儲存映像downloader.newsItem = item;//傳入下載完成後的回呼函數[downloader setCompletionHandler:^{//下載完成後要執行的回調部分，block的實現//根據indexPath擷取cell對象，並載入映像#pragma mark cellForRowAtIndexPath-->沒看到過NewsListCell * cell = (NewsListCell *)[self.tableView cellForRowAtIndexPath:indexPath];cell.picImageView.image = downloader.newsItem.newsPic;}];//開始下載[downloader startDownloadImage:item.newsPicUrl];[downloader release];}- (void)loadImagesForOnscreenRows{#pragma mark indexPathsForVisibleRows-->沒看到過//擷取tableview正在window上顯示的cell，載入這些cell像。通過indexPath可以擷取該行上需要展示的cell對象NSArray * visibleCells = [self.tableView indexPathsForVisibleRows];for (NSIndexPath * indexPath in visibleCells) {NewsItem * item = [_dataArray objectAtIndex:indexPath.row];if (item.newsPic == nil) {//如果新聞還沒有下載映像，開始下載[self startPicDownload:item forIndexPath:indexPath];}}}#pragma mark - 消極式載入關鍵//tableView停止拖拽，停止滾動- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{//如果tableview停止滾動，開始載入映像if (!decelerate) {[self loadImagesForOnscreenRows];}     NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate);}- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//如果tableview停止滾動，開始載入映像[self loadImagesForOnscreenRows];}