加載、滑動翻閱大量圖片解決方案詳解
今天分享一下私人相冊中,讀取加載、滑動翻閱大量圖片解決方案,我想強調的是,編程思想無關乎平臺限制。
我要詳細說一下,在縮略圖界面點擊任意小縮略圖後,進入高清大圖全屏瀏覽界面的這短暫的1秒內(和後續的幾秒),都發生了什麼。
常規思路流程
點擊任意小圖後,
1.首先製作scrollview框架:大小2個scrollview,小的用於手勢縮放單一圖片,大的橫向依次加載全部照片
2.製作好scrollview框架後,加載照片
3.一切準備就緒跳轉頁面呈現給用戶選擇的大圖
加載圖片這一步,若相冊內就10幾張照片,那麼毫無技術挑戰,但是如果是300張照片呢?直接崩潰?還是讓用戶等待加載? 時間緊任務重,這一步需要拆分和優化.
scrollview框架需要了解下API,然後動動腦子了,這裏有個小竅門,很多人都問我照片與照片間的黑邊間距怎麼實現,呵呵,貼下代碼:
- #define PADDING 20
- - (NSInteger)loadPhotos
- {
- //清理之前照片
- for (UIView *v in [_scrollView subviews]) {
- [v removeFromSuperview];
- }
- workingFrame = [[UIScreen mainScreen]bounds];
- workingFrame.origin.x = PADDING;
- for (int i = 0; i < int_total; i++) {
- CGRect frame = workingFrame;
- WQPhoto *photoView = [[WQPhoto alloc] initWithFrame:frame];
- [photoView setScroller:self];
- [photoView setIndex:i];
- WQAlbumPhoto *photo = [albumObject._photos objectAtIndex:i];
- [photo cleanThumbnail];
- if (i == int_current) {
- //加載原圖
- [photoView setImage:photo.oriImage];
- [photoView setIsLoad:YES];
- }else if (int_current - 10 < i && i < int_current + 10){
- //加載左右臨近的縮略圖
- [photoView setImage:photo.thumbnail4view];
- }
- [_scrollView addSubview:photoView];
- workingFrame.origin.x = workingFrame.origin.x + 2 * PADDING
- + workingFrame.size.width;
- }
- //實現可滾動
- [_scrollView setContentSize:CGSizeMake(workingFrame.origin.x, workingFrame.size.height / 2)];
- [_scrollView setContentOffset:CGPointMake(360 * int_current, 0)];
- //加載其餘縮略圖
- loadThread = [[NSThread alloc]initWithTarget:self selector:@selector(loadImages) object:nil];
- return 0;
- }
使用低分辨率圖
仔細想想,其實沒有必要第一時間加載全部圖片的高清原圖,事先存好每張圖配套的低分辨率圖,用空間換時間。
先加載所有的圖片的低分辨率圖, 當用戶翻閱到某一張圖片時, 即時的加載原始尺寸的高清無碼大圖. 過程優化爲:
多線程任務
即使是這樣,當照片數量達到一定量時,需要消耗的時間也並非毫秒級,體驗無法領人滿意, 頁面跳轉時仍然會出現卡頓現象。
於是考慮使用多線程來進一步拆分任務, 執行跳轉的同時再後臺執行加載低分辨率圖的步驟.
優化快速翻閱體驗
通過這樣的拆分,可以實現立即跳轉,體驗滿意。但是翻閱瀏覽時,當用戶很快左右滑動時,
出現黑屏的機率很高, 因爲加載低分辨率圖任務的線程可能還在進行大量IO操作,不能及時跟上。 爲了完善它,要把加載低分辨率圖的步驟再次分解,精益求精。
在頁面跳轉時間允許的範圍內,加載用戶選定的那張圖片的高清原圖的同時,儘可能多的加載幾張左右臨近的圖片的低分辨率圖。
在頁面跳轉時間允許的範圍內,加載用戶選定的那張圖片的高清原圖的同時,儘可能多的加載幾張左右臨近的圖片的低分辨率圖。
如何加載其餘的低分辨率圖?
以用戶點擊選定的那張圖爲中心向兩邊加載,
直接想應該是兩個線程一左一右的加載,再想想左右一起加載其實可以是一個循環, 免了再開線程的那些耗費了。
- -(BOOL)loadImages
- {
- for (int i = int_current - 10, j = int_current + 10 ; !( i < 0 && int_total - 1 < j); --i, ++j) {
- if (!(i < 0)) {
- WQPhoto *photo_pre = [_scrollView.subviews objectAtIndex:i];
- WQAlbumPhoto *photoPre = [albumObject._photos objectAtIndex:i];
- [photo_pre setImage:photoPre.thumbnail4view];
- }
- if (!(int_total - 1 < j)) {
- WQPhoto *photo_next = [_scrollView.subviews objectAtIndex:j];
- WQAlbumPhoto *photoNext = [albumObject._photos objectAtIndex:j];
- [photo_next setImage:photoNext.thumbnail4view];
- }
- }
- return YES;
- }
最後還一個砍兒
儘量減少內存佔用. 因爲原始圖片要比低分辨率圖大很多, 所以當用戶從一張圖片翻閱到另一張圖片時, 當前圖片加載爲原始尺寸的高清大圖, 而原來那張就被替換爲低分辨率圖了。
雖然讀寫次數增多了, 但內存確實省了不少。
實話說,市場上不少相冊類的app,
翻閱時都會有卡頓的跳躍感,呵呵……
P.S. 下次總結討論下,獨立開發者如何不花一分錢的推廣,最終實現盈利:
歡迎交流