iOS
イメージを非同期に読み込む

最も簡単な方法

これを作成する最も簡単な方法は、 AlamofireとそのUIImageViewExtensionを使用することです 。必要なのはそれでImageViewのを持っており、それを呼び出すことができますセルとテーブルビューでimageView 。

tableViewのcellForRowAt：関数では、画像をダウンロードして次のように設定します。

let url = URL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!

imageView.af_setImage(withURL: url, placeholderImage: placeholderImage)

urlはダウンロードするイメージを指し、placeHolderイメージは保存されたイメージでなければなりません。私たちは、その後、呼び出しaf_setImage上の方法をimageView与えられたURLの画像をダウンロードし、ダウンロード中にプレースホルダ画像が表示されます。画像がダウンロードされると、要求された画像が表示されます

ダウンロード後もセルが表示されていることを確認してください

場合によっては、セルが表示されるよりもダウンロードに時間がかかることがあります。この場合、ダウンロードした画像が間違ったセルに表示されることがあります。これを修正するためにUIImageView Extensionを使用することはできません。

まだAlamofireを使用していますが、補完ハンドラを使用して画像を表示します。

このシナリオでは、まだimageViewを持つセルを持つtableViewが必要です。 cellForRowAt：メソッドでは、次のコードを使用してイメージをダウンロードします。

let placeholderImage = UIImage(named: "placeholder")!
imageView.image = placeholderImage

let url = URL(string: "https://httpbin.org/image/png")!

Alamofire.request(url!, method: .get).responseImage { response in
    guard let image = response.result.value else { return }

    if let updateCell = tableView.cellForRow(at: indexPath) {
        updateCell.imageView.image = image
    }
}

この例では、最初に画像をプレースホルダ画像に設定します。その後、 Alamofireの requestメソッドで画像をダウンロードします。最初の引数としてurlを渡します。イメージを取得したいだけなので、 .get HTTPメソッドを使用します。イメージをダウンロードしているので、レスポンスをイメージにしたいので、 .responseImageメソッドを使用します。

画像がダウンロードされた後、クロージャが呼び出され、最初にダウンロードされた画像が実際に存在することが確認されます。次に、cellForRow（at：indexPath）がnilを返さないことを確認して、セルがまだ見えることを確認します。何も起こらない場合は、最近ダウンロードした画像を割り当てません。

この最後のifステートメントは、ユーザーが既にセルをスクロールしてもupdateCellがnilになり、ifステートメントがnilを返す場合、セルがまだ表示されていることを確認します。これにより、セル内に間違った画像が表示されるのを防ぐことができます。