マルチスレッドでのCollectionview読み込みがうまくいかない

Question

Realmに保存している写真のlocalIdentifierから写真をCollectionViewに表示できるようにしたのですが

スクロールの速度を上げるとカクついてしまうため、マルチスレッドで読み込みを早くしようとしたら、カクつきはしなくなりましたが
その代わり読み込まれる画像がおかしくなってしまいます

もしかしたら他スレッドでの処理が終わっていないのにcellへの画像設定が呼び出されているから、おかしいのかなと思いましたが、解決策がわかりません

解決方法をご存知の方いましたらご教授願えませんでしょうか

よろしくお願いいたします

CollectionViewDelegate

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "test", for: indexPath) as! collectionViewCell		
    _getPhotoImage(index: indexPath.row)
    cell.photoView.image = self.image		
    return cell
}

private var image: UIImage?

private func _getPhotoImage(index: Int){
		let realm = try! Realm()
       //Realmはバラバラに保存されるため、順番を保持するための配列
		var photoCollection = UserDefaults.standard.array(forKey: "PHOTO_COLLECTION")
		
		if let photoObject = realm.object(ofType: Photo.self, forPrimaryKey: (photoCollection?[index])){
			let _photo = ThreadSafeReference(to: photoObject)
			DispatchQueue.global(qos: .userInteractive).async {	
				let realm = try! Realm()
				guard let photo = realm.resolve(_photo) else {
					return 
				}
				let localIdentifier: [String] = [photo.photoURL!]
				let photoAsset = PHAsset.fetchAssets(withLocalIdentifiers: localIdentifier, options: nil)
　              //PHAssetをUIImageに変換
				self.image = getUIImage(asset:photoAsset.object(at: 0))
			}
		}
}

Answer 1

マルチスレッドで動いているなら完了する順番がわかりませんから self.imageに一旦保存するようなことはしてはダメです。
画像が読み込み終わったら、DispatchQueue.mainでメインスレッドに戻してセルが画面内にあれば(cellForItemが返ってくれば)そのセルに画像を設定します。

let image = getUIImage(asset:photoAsset.object(at: 0))
DispatchQueue.main.async{
    // cellは適当に自分のセルの型に変換してください
    let cell = self.collectionView.cellForItem(at:index)
    cell?.photoView.image = image
}

cellForItemAt の cell.photoView.image = self.image は不要です。
あと、現状だとセルが表示されるたびに読み込みが発生するので、多少キャッシュするような処理が必要になると思います。

Comments

[退会済みユーザー]

回答ありがとうございます
試してみたところ動きがよくなりました！

最後に一つだけお聞きしたいのですが、カク付きはなくなったのですが、読み込みが間に合っていない時があります、それはおっしゃっていた表示されるたびに読み込みが発生しているから、処理が間に合っていないという考え方で大丈夫でしょうか？

[toki_td]

間に合っていない、というのは空の領域が表示されてしばらくしたら画像が出る、ということですか？
それならその通りです。素早くスクロールした場合などは大量の読み込みが発生するので、DispatchQueueに要求がどんどん溜まっていき、(すでにスクロールが行き過ぎて不要になった画像も含めて)順次読み込まれていくのでどうしても遅延が発生します。

対応方法はいくつかあります。
・DispatchQueue.globalの実行ブロックでそのインデックスが表示範囲内か確認し、不要なら画像を読み込まない
・スクロールの範囲から必要な前後をある程度先読みする
・一度読んだ画像はある程度キャッシュする

完全な対処は難しいですが、これらを組み合わせれば必要十分なレベルになると思います。

[退会済みユーザー]

勉強になりました！
ありがとうございました！！