加載、滑動翻閱大量圖片解決方案詳解

加載、滑動翻閱大量圖片解決方案詳解

今天分享一下私人相冊中，讀取加載、滑動翻閱大量圖片解決方案，我想強調的是，編程思想無關乎平臺限制。

我要詳細說一下，在縮略圖界面點擊任意小縮略圖後，進入高清大圖全屏瀏覽界面的這短暫的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.  下次總結討論下，獨立開發者如何不花一分錢的推廣，最終實現盈利：

歡迎交流