iOS開發 關於tableView載入圖片時出現卡頓時的解決辦法

新手做開發的時候一般都會遇到使用tableView從網上載入圖片並顯示圖文的時候會有卡頓現象，而這種卡頓現象也是因為多種原因造成的。一般可以分為兩種：一種是由於網上載入圖片需要動態定義cell的高度（如果是固定的高度，可以忽略），而在定義cell高度的時候一般都會先去下載圖片然後再計算圖片的大小，進而計算cell的高度。另一種就是在cell顯示圖片時，沒有進行非同步處理載入圖片與顯示的邏輯。

下面進行對上面兩種造成卡頓的原因提出我的方法，對於第一種可以進行抓去圖片的URL的http頭部資訊，計算cell高度的時候只去擷取圖片的大小，而不去下載圖片。這樣就會免去下載圖片這個耗時的過程，而只在cell中顯示圖片的時候才去真正下載圖片。這裡給出圖片類型為JPG的方法中：

#pragma mark -#pragma mark JPG格式的圖片 根據圖片部份資料得到圖片的size+ (CGSize)downloadJpgImage:(NSString*)strUrl{    NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:strUrl]];    [request setValue:@"bytes=0-209" forHTTPHeaderField:@"Range"];    NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];    return [self jpgImageSizeWithHeaderData:data];}+ (CGSize)jpgImageSizeWithHeaderData:(NSData *)data{    if ([data length] <= 0x58) {        return CGSizeZero;    }    if ([data length] < 210) {// 肯定只有一個DQT欄位        short w1 = 0, w2 = 0;        [data getBytes:&w1 range:NSMakeRange(0x60, 0x1)];        [data getBytes:&w2 range:NSMakeRange(0x61, 0x1)];        short w = (w1 << 8) + w2;        short h1 = 0, h2 = 0;        [data getBytes:&h1 range:NSMakeRange(0x5e, 0x1)];        [data getBytes:&h2 range:NSMakeRange(0x5f, 0x1)];        short h = (h1 << 8) + h2;        return CGSizeMake(w, h);    } else {        short word = 0x0;        [data getBytes:&word range:NSMakeRange(0x15, 0x1)];        if (word == 0xdb) {            [data getBytes:&word range:NSMakeRange(0x5a, 0x1)];            if (word == 0xdb) {// 兩個DQT欄位                short w1 = 0, w2 = 0;                [data getBytes:&w1 range:NSMakeRange(0xa5, 0x1)];                [data getBytes:&w2 range:NSMakeRange(0xa6, 0x1)];                short w = (w1 << 8) + w2;                short h1 = 0, h2 = 0;                [data getBytes:&h1 range:NSMakeRange(0xa3, 0x1)];                [data getBytes:&h2 range:NSMakeRange(0xa4, 0x1)];                short h = (h1 << 8) + h2;                return CGSizeMake(w, h);            } else {// 一個DQT欄位                short w1 = 0, w2 = 0;                [data getBytes:&w1 range:NSMakeRange(0x60, 0x1)];                [data getBytes:&w2 range:NSMakeRange(0x61, 0x1)];                short w = (w1 << 8) + w2;                short h1 = 0, h2 = 0;                [data getBytes:&h1 range:NSMakeRange(0x5e, 0x1)];                [data getBytes:&h2 range:NSMakeRange(0x5f, 0x1)];                short h = (h1 << 8) + h2;                return CGSizeMake(w, h);            }        } else {            return CGSizeZero;        }    }}

其他圖片的方法可以參照：

對於第二種原因的解決方案就是使用非同步載入的方式，當然首先你得知道我們經常用的網路載入圖片的庫是SDWebImage。另外，如果想進行非同步載入圖片的話最好自訂cell，資料的載入放在customCell中進行賦值。

非同步載入：

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{                    [stImgView setImageWithURL:[NSURL URLWithString:strPicUrls]];                    [self.retStImageViewBg addSubview:stImgView];                });