iOS開發——載入、滑動翻閱大量圖片解決方案詳解

載入、滑動翻閱大量圖片解決方案詳解今天分享一下私人相簿中，讀取載入、滑動翻閱大量圖片解決方案，我想強調的是，編程思想無關乎平台限制。我要詳細說一下，在縮圖介面點擊任意小縮圖後，進入高清大圖全屏瀏覽介面的這短暫的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.  下次總結討論下，獨立開發人員如何不花一分錢的推廣，最終實現盈利：

歡迎交流