ios - swift 3 : tableView duplicating loaded images from Firebase

Question

我正在尝试显示带有图像的用户列表。这是代码

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! UserListTableViewCell
    let message = messages[indexPath.row]
    cell.message = message
    return cell
}

在 UserListTableViewCell 文件中，我正在下载图像(也使用缓存)并将其显示在表格上。但我看到有些行有重复/重复的图像。重新加载后，重复项消失，但返回垂直滚动。

这发生了:

这是 UserListTableViewCell 文件:

import UIKit
import Firebase

class UserListTableViewCell: UITableViewCell {

@IBOutlet weak var username: UILabel!
@IBOutlet weak var textMessage: UILabel!
@IBOutlet weak var timeLabel: UILabel!
@IBOutlet weak var userImage: UIImageView!



var message: Message? {

    didSet {

        if let id = message?.chatPartnerID() {

            let database = Database.database().reference()
            let ref = database.child("Users").child(id)
            ref.observeSingleEvent(of: .value, with: {
                (snapshot) in

                if let dictionary = snapshot.value as? [String: AnyObject] {


                        self.username.text = dictionary["username"] as? String

                        if let profileImageUrl = dictionary["image"] as? String, profileImageUrl != "" {
                                                            self.userImage.image = UIImage(named: "blank-user")
                            self.userImage.loadImageFromCacheWithUrlString(urlString: profileImageUrl)
                            self.userImage.layer.cornerRadius = self.userImage.frame.size.width/2
                            self.userImage.clipsToBounds = true

                        } else {

                            self.userImage.image = UIImage(named: "blank-user")
                            self.userImage.layer.cornerRadius = self.userImage.frame.size.width/2
                            self.userImage.clipsToBounds = true
                        }

                }



            }, withCancel: nil)
        }


        textMessage.text = (message?.text)! + " " + (message?.chatPartnerID())!

        if let seconds = message?.timestamp?.doubleValue {
            let timestampDate = Date(timeIntervalSince1970: seconds)

            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "hh:mm a"
            timeLabel.text = dateFormatter.string(from: timestampDate)
        }


        //userImage.image = message?.
    }
} }

图片下载扩展文件:

extension UIImageView {
func loadImageFromCacheWithUrlString( urlString: String) {

    if urlString != "" {
        self.image = nil

        if let cachedImage = imageCache.object(forKey: urlString as AnyObject) {

            self.image = cachedImage as? UIImage
            self.contentMode = .scaleAspectFill
            return
        }


        let url = URL(string : urlString )

        URLSession.shared.dataTask(with: url!, completionHandler: { (data, response, error) in

            if error != nil {
                print(error!)
                return
            }

            DispatchQueue.main.async(execute: {

                if let downloadedImage = UIImage(data: data!) {

                    imageCache.setObject(downloadedImage, forKey: urlString as AnyObject)
                    self.image = downloadedImage
                    self.contentMode = .scaleAspectFill
                }


            })

        }).resume()
    }


}

Answer 1

基本上您使用单元格重用，所以每次新的重用以前的单元格所以它是重用以前的单元格数据所以你需要清除以前的数据。你应该没有图像查看下载新图像或使用占位符图像

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! UserListTableViewCell
    .   cell.userImage.image = nil
        let message = messages[indexPath.row]
        cell.message = message
        return cell
}

更新: From apple doc

If a UITableViewCell object is reusable—that is, it has a reuse identifier—this method is invoked just before the object is returned from the UITableView method dequeueReusableCell(withIdentifier:) . For performance reasons, you should only reset attributes of the cell that are not related to content, for example, alpha, editing, and selection state. The table view's delegate in tableView(_:cellForRowAt:) should always reset all content when reusing a cell. If the cell object does not have an associated reuse identifier, this method is not called. If you override this method, you must be sure to invoke the superclass implementation.

所以放入你的 UserListTableViewCell 类

override func prepareForReuse() {
    super.prepareForReuse()
       self.userImage.image() = nil
    // self.userImage.image = nil // above line not working then try this 
}