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

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

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

@下面我的代碼用的是自己寫的異步加載緩存類,SDWebImage的加載圖片的懶加載,原理差不多.

[objc] view plaincopy

1. @model類
2. #import <Foundation/Foundation.h>
4. @interface NewsItem : NSObject
6. @property (nonatomic,copy) NSString * newsTitle;
7. @property (nonatomic,copy) NSString * newsPicUrl;
8. @property (nonatomic,retain) UIImage * newsPic; //  存儲每個新聞自己的image對象
10. - (id)initWithDictionary:(NSDictionary *)dic;
12. //  處理解析
13. + (NSMutableArray *)handleData:(NSData *)data;
14. @end
17. #import "NewsItem.h"
18. #import "ImageDownloader.h"
20. @implementation NewsItem
22. - (void)dealloc
23. {
24.     self.newsTitle = nil;
25.     self.newsPicUrl = nil;
26.     self.newsPic = nil;
27.     [super dealloc];
28. }
30. - (id)initWithDictionary:(NSDictionary *)dic
31. {
32.     self = [super init];
33.     if (self) {
36.         self.newsTitle = [dic objectForKey:@"title"];
37.         self.newsPicUrl = [dic objectForKey:@"picUrl"];
39.         //從本地沙盒加載圖像
40.         ImageDownloader * downloader = [[[ImageDownloader alloc] init] autorelease];
41.         self.newsPic = [downloader loadLocalImage:_newsPicUrl];
43.     }
45.     return self;
46. }
48. + (NSMutableArray *)handleData:(NSData *)data;
49. {
51.         //解析數據
52.         NSError * error = nil;
53.         NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
54.         NSMutableArray * originalArray = [dic objectForKey:@"news"];
56.         //封裝數據對象
57.         NSMutableArray * resultArray = [NSMutableArray array];
59.         for (int i=0 ;i<[originalArray count]; i++) {
60.             NSDictionary * newsDic = [originalArray objectAtIndex:i];
61.             NewsItem * item = [[NewsItem alloc] initWithDictionary:newsDic];
62.             [resultArray addObject:item];
63.             [item release];
64.         }
66.         return resultArray;
68. }
70. @end

 

[objc] view plaincopy

1. @圖片下載類
2. #import <Foundation/Foundation.h>
5. @class NewsItem;
8. @interface ImageDownloader : NSObject
11. @property (nonatomic,copy) NSString * imageUrl;
12. @property (nonatomic,retain) NewsItem * newsItem; //下載圖像所屬的新聞
15. //圖像下載完成後，使用block實現回調
16. @property (nonatomic,copy) void (^completionHandler)(void);
19. //開始下載圖像
20. - (void)startDownloadImage:(NSString *)imageUrl;
23. //從本地加載圖像
24. - (UIImage *)loadLocalImage:(NSString *)imageUrl;
27. @end
32. #import "ImageDownloader.h"
33. #import "NewsItem.h"
36. @implementation ImageDownloader
39. - (void)dealloc
40. {
41.     self.imageUrl = nil;
42.     Block_release(_completionHandler);
43.     [super dealloc];
44. }
49. #pragma mark - 異步加載
50. - (void)startDownloadImage:(NSString *)imageUrl
51. {
54.     self.imageUrl = imageUrl;
57.     // 先判斷本地沙盒是否已經存在圖像，存在直接獲取，不存在再下載，下載後保存
58.     // 存在沙盒的Caches的子文件夾DownloadImages中
59.     UIImage * image = [self loadLocalImage:imageUrl];
62.     if (image == nil) {
65.         // 沙盒中沒有，下載
66.         // 異步下載,分配在程序進程缺省產生的並發隊列
67.         dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
70.             // 多線程中下載圖像
71.             NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]];
74.             // 緩存圖片
75.             [imageData writeToFile:[self imageFilePath:imageUrl] atomically:YES];
78.             // 回到主線程完成UI設置
79.             dispatch_async(dispatch_get_main_queue(), ^{
82.                 //將下載的圖像，存入newsItem對象中
83.                 UIImage * image = [UIImage imageWithData:imageData];
84.                 self.newsItem.newsPic = image;
87.                 //使用block實現回調，通知圖像下載完成
88.                 if (_completionHandler) {
89.                     _completionHandler();
90.                 }
92.             });
94.         });
95.     }
97. }
99. #pragma mark - 加載本地圖像
100. - (UIImage *)loadLocalImage:(NSString *)imageUrl
101. {
103.     self.imageUrl = imageUrl;
106.     // 獲取圖像路徑
107.     NSString * filePath = [self imageFilePath:self.imageUrl];
110.     UIImage * image = [UIImage imageWithContentsOfFile:filePath];
113.     if (image != nil) {
114.         return image;
115.     }
117.     return nil;
118. }
120. #pragma mark - 獲取圖像路徑
121. - (NSString *)imageFilePath:(NSString *)imageUrl
122. {
123.     // 獲取caches文件夾路徑
124.     NSString * cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
127.     // 創建DownloadImages文件夾
128.     NSString * downloadImagesPath = [cachesPath stringByAppendingPathComponent:@"DownloadImages"];
129.     NSFileManager * fileManager = [NSFileManager defaultManager];
130.     if (![fileManager fileExistsAtPath:downloadImagesPath]) {
133.         [fileManager createDirectoryAtPath:downloadImagesPath withIntermediateDirectories:YES attributes:nil error:nil];
134.     }
137. #pragma mark 拼接圖像文件在沙盒中的路徑,因為圖像URL有"/",要在存入前替換掉,隨意用"_"代替
138.     NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
139.     NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName];
142.     return imageFilePath;
143. }
145. @end

 

[objc] view plaincopy

1. @這裡只給出關鍵代碼,網絡請求,數據處理,自定義cell自行解決
3. #pragma mark - Table view data source
5. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
6. {
7.     // Return the number of sections.
8.     return 1;
9. }
11. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
12. {
13.     // Return the number of rows in the section.
14.     if (_dataArray.count == 0) {
15.         return 10;
16.     }
17.     return [_dataArray count];
18. }
20. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPathNSIndexPath *)indexPath
21. {
22.     static NSString *cellIdentifier = @"Cell";
23.     NewsListCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier ];
24.     if (!cell) {
25.         cell = [[[NewsListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];
26.     }
28.     NewsItem * item = [_dataArray objectAtIndex:indexPath.row];
30.     cell.titleLabel.text = item.newsTitle;
32.     //判斷將要展示的新聞有無圖像
34.     if (item.newsPic == nil) {
35.         //沒有圖像下載
36.         cell.picImageView.image = nil;
38.         NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating);
39.         // ??執行的時機與次數問題
40.         if (self.tableView.dragging == NO && self.tableView.decelerating == NO) {
41.             [self startPicDownload:item forIndexPath:indexPath];
42.         }
44.     }else{
45.         //有圖像直接展示
46.         NSLog(@"1111");
47.         cell.picImageView.image = item.newsPic;
49.     }
51.     cell.titleLabel.text = [NSString stringWithFormat:@"indexPath.row = %ld",indexPath.row];
53.     return cell;
54. }
56. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPathNSIndexPath *)indexPath
57. {
58.     return [NewsListCell cellHeight];
59. }
61. //開始下載圖像
62. - (void)startPicDownload:(NewsItem *)item forIndexPathNSIndexPath *)indexPath
63. {
64.     //創建圖像下載器
65.     ImageDownloader * downloader = [[ImageDownloader alloc] init];
67.     //下載器要下載哪個新聞的圖像，下載完成後，新聞保存圖像
68.     downloader.newsItem = item;
70.     //傳入下載完成後的回調函數
71.     [downloader setCompletionHandler:^{
73.         //下載完成後要執行的回調部分，block的實現
74.         //根據indexPath獲取cell對象，並加載圖像
75. #pragma mark cellForRowAtIndexPath-->沒看到過
76.         NewsListCell * cell = (NewsListCell *)[self.tableView cellForRowAtIndexPath:indexPath];
77.         cell.picImageView.image = downloader.newsItem.newsPic;
79.     }];
81.     //開始下載
82.     [downloader startDownloadImage:item.newsPicUrl];
84.     [downloader release];
85. }
88. - (void)loadImagesForOnscreenRows
89. {
90. #pragma mark indexPathsForVisibleRows-->沒看到過
91.     //獲取tableview正在window上顯示的cell，加載這些cell上圖像。通過indexPath可以獲取該行上需要展示的cell對象
92.     NSArray * visibleCells = [self.tableView indexPathsForVisibleRows];
93.     for (NSIndexPath * indexPath in visibleCells) {
94.         NewsItem * item = [_dataArray objectAtIndex:indexPath.row];
95.         if (item.newsPic == nil) {
96.             //如果新聞還沒有下載圖像，開始下載
97.             [self startPicDownload:item forIndexPath:indexPath];
98.         }
99.     }
100. }
102. #pragma mark - 延遲加載關鍵
103. //tableView停止拖拽，停止滾動
104. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerateBOOL)decelerate
105. {
106.     //如果tableview停止滾動，開始加載圖像
107.     if (!decelerate) {
109.         [self loadImagesForOnscreenRows];
110.     }
111.      NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate);
112. }
114. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
115. {
116.     //如果tableview停止滾動，開始加載圖像
117.     [self loadImagesForOnscreenRows];
119. }