PICK UP POST

iOS UICollectionViewで画像をprefetchする

UICollectionViewで画像を読み込んで一覧表示すると
スクロールした時に表示が遅いと感じる時があります。
cellForItemAtIndexPathのタイミングで画像を読み込むと
画像サイズや通信状態によっては表示が追いつかないケースがあります。

この対策として有効なのがiOS 10から使えるUICollectionViewのPrefetchingです。
cellForItemAtIndexPathより早いタイミングで実行され、
メインスレッド以外で実行されます。
同時に画像キャッシュライブラリを使用すればより?です。

例）SDWebImageのprefetchを併用して行う場合

import SDWebImage

class SampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 10.0, *) {
            collectionView.prefetchDataSource = self
        }
    }
}

extension SampleViewController: UICollectionViewDataSourcePrefetching {

    // prefetch開始
    func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) {

        // APIなどで取得した画像URLの配列を設定
        SDWebImagePrefetcher.shared().prefetchURLs(urls)
    }

    // prefetchキャンセル
    // スクロールの方向が変更された時に呼ばれる
    func collectionView(_ collectionView: UICollectionView, cancelPrefetchingForItemsAt indexPaths: [IndexPath]) {

        SDWebImagePrefetcher.shared().cancelPrefetching()
    }
}

extension SampleViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {    

        // prefetchをしておけばこのタイミングで既に画像が読み込まれているので
        // 表示の遅れを改善できる。
    }
}