Swift3：画像の非同期読み込み時に別の画像が表示される

Question

画像をURLから読み込み、TableViewのセルに
それぞれが保持しているURL先の画像を表示させる処理を実装しております。

表示するセルの数が何百件とあり、
素早くスクロールすると、別のセルで使っている画像が表示されてしまうことがあるため改善したいです。

scrollView.decelerationRate = UIScrollViewDecelerationRateFast

上記を指定してスクロール速度を下げてみましたが、
解決には至りませんでした。

SDWebImageというライブラリを使用した実装にしようかとも考えましたが、
いまいち実装方法が不明なため、下記のような実装となりました。

何か、解決方法等がございましたら、ご教示お願い致します。

import UIKit
import SwiftyJSON

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, URLSessionDelegate {

    @IBOutlet weak var tableView: UITableView!

~ 省略 ~

    // セクション数
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    // セクションの行数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return friends.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath:IndexPath) -> UITableViewCell {    
        let cell: CustomCell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath as IndexPath) as! CustomCell
        cell.setCell(friend: friends[indexPath.row])
        return cell
    }

//非同期
//friend.imageUrlには画像のURLが入っています

import UIKit

class CustomCell: UITableViewCell {

@IBOutlet weak var imageView: UIImageView!

~ 省略 ~

override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    
    func setCell(friend :Friend) {

            let req = URLRequest(url: NSURL(string:friend.imageUrl as String)! as URL,
                                 cachePolicy: .returnCacheDataElseLoad);
            //追記
            let urlStay = req.url
            let conf =  URLSessionConfiguration.default;
            let session = URLSession(configuration: conf, delegate: nil, delegateQueue: OperationQueue.main);
            
            session.dataTask(with: req, completionHandler:
                { (data, resp, err) in
                    //追記
                    if((err) == nil && urlStay == resp?.url){ //Success
                        let image = UIImage(data:data!)
                        self.imageView.image = image;
                        
                    }else{ //Error
                        print("AsyncImageView:Error \(err?.localizedDescription)");
                    }
                    
            }).resume();
           }
    }

Comments

[fuzzball]

このリクエストはどこから呼んでいるのでしょうか？

[mokumoku]

すみません、friend.imageUrlに入っているURLのことでしょうか。

[fuzzball]

let req = URLRequest() 〜 session.dataTask().resume(); のコードはどこから（どういうタイミングで）呼ばれているのでしょうか？

[mokumoku]

ViewControllerのfunc tableView(_ tableView: UITableView, cellForRowAt indexPath:IndexPath) -> UITableViewCellで、画面表示時とTableViewをスクロールした際に呼ばれているかと思います。

Answer 1

試していないので外しているかもしれませんが、cellのprepareForReuse()でimageView.image=nilとしてみては?

Comments

[mokumoku]

お手数おかけします。
下記を追記しましたが、実装前と変化はありませんでした。
printを使用して、呼ばれていることも確認しました。
override func prepareForReuse()
{
　self.imageView.image = nil;
}

[ShujiFukumoto]

駄目でしたか(^^;)
ちなみにsuper.prepareForReuse()
が必要だったと思います。
あと、ここでdataTaskのキャンセルを入れるといいかも。

[mokumoku]

super.prepareForReuse()を記載しましたが、ダメでした。
dataTaskのキャンセルの記載方法がいまいち不明です。
setCell内を、let task = session.dataTask(with: req, completionHandler:に変更して、
prepareForReuse内にtask.cancel()を記載しましたがスコープ的に見えてないようなエラーがでました。
dataTaskのキャンセルの記載方法はどういった記載になりますでしょうか。
お手数ですが、よろしくお願いします。

Answer 2

セルが使われなくなったのにリクエスト（＆画像セット）の処理が残っているのが原因だと思われます。

リクエストのキャンセル

画像のリクエストをした後、リクエストが完了する前に画面外に出たとき、もしくは他のセルが使おうとしたとき、もしくは両方のタイミングで、リクエストをキャンセルして下さい。dataTask(with:completionHandler:)の戻り値を保存しておく必要があります。

読み込み完了時にURL確認

画像リクエスト時にURLを保存しておき、読み込み完了時にresp.urlと比較し、一致すればimageをセット、一致しなければセットしないようにする。

---

どっちかだけでもいけそうな気がしますが、両方やっておくと安心です。
もしかしたら両方やっていても穴があるかも知れません。

Comments

[mokumoku]

読み込み完了時にURL確認の実装を質問文に追記しましたが、間違っていますでしょうか。
実行したところ実装前と変化ありませんでした。
リクエストのキャンセルの戻り値を保存しておくというのはどういった処理を実装すればよいのかイメージできません。何か参考等ございませんでしょうか。
お手数ですがよろしくお願いします。

[fuzzball]

urlStayをプロパティにしてみてもらえますか？

>>リクエストのキャンセルの戻り値を保存
戻り値というのは URLSessionDataTask のことです。
task = session.dataTask(...)
task.resume()
という形にしておいて、task.cancel()でリクエストをキャンセル出来ます。

[fuzzball]

キャンセル処理は入れないとマズイですね。そのまま放っておくと、スクロールしたときにリクエストがどんどん溜まっていってしまいます。

[mokumoku]

task.cancel()はtask.resume()を抜けた後に宣言するのでしょうか。
Did you mean 'mask'?と表示されます。

[fuzzball]

キャンセルは、キャンセルすべきときに呼び出して下さい。
ところで、urlStayをプロパティにするとどうなりましたか？

[mokumoku]

elseでスクロール時の処理は入ってきていると思っておりましたが、
別で処理を実装する必要があるということですか。
プロパティにするというのはどういうことなのかわからないため、試せておりません。
下記を参考に実装しようとしておりますが、まだ理解できておりません。
http://tea-leaves.jp/swift/content/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

[fuzzball]

CustomCellに、
var urlStay: URL?
を追加して下さい。

CustomCell自身からは、self.urlStay もしくは urlStay だけでアクセス出来ます。
他のクラスから、例えば tableView(_:cellForRowAt:) の中でしたら、
cell.urlStay でアクセス出来ます。