iOS---tableview加載圖片的時候的優化之lazy(懶加載)模式and異步加載模式
編輯：IOS開發綜合
舉個例子,當我們在用網易新聞App時,看著那麼多的新聞,並不是所有的都是我們感興趣的,有的時候我們只是很快的滑過,想要快速的略過不喜歡的內容,但是只要滑動經過了,圖片就開始加載了,這樣用戶體驗就不太好,而且浪費內存.
這個時候,我們就可以利用lazy加載技術,當界面滑動或者滑動減速的時候,都不進行圖片加載,只有當用戶不再滑動並且減速效果停止的時候,才進行加載.
剛開始我異步加載圖片利用SDWebImage來做,最後試驗的時候出現了重用bug,因為雖然SDWebImage實現了異步加載緩存,當加載完圖片後再請求會直接加載緩存中的圖片,注意注意注意,關鍵的來了,如果是lazy加載,滑動過程中是不進行網絡請求的,cell上的圖片就會發生重用,當你停下來能進行網絡請求的時候,才會變回到當前Cell應有的圖片,大概1-2秒的延遲吧(不算延遲,就是沒有進行請求,也不是沒有緩存的問題).怎麼解決呢?這個時候我們就要在Model對象中定義個一個UIImage的屬性,異步下載圖片後,用已經緩存在沙盒中的圖片路徑給它賦值,這樣,才cellForRowAtIndexPath方法中,判斷這個UIImage對象是否為空,若為空,就進行網絡請求,不為空,就直接將它賦值給cell的imageView對象,這樣就能很好的解決圖片短暫重用問題.
@下面我的代碼用的是自己寫的異步加載緩存類,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];
}
相關文章
+