在 TableView 中从 Fiverr 加载图像

Question

嗨，我正在 Xcode 中制作一个应用程序，并为此使用 swift。我正在从 Firebase 下载图像并在表格视图中显示它们。这有一些问题。但首先我会展示代码。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! FrontViewCell

    cell.contentView.backgroundColor = UIColor.clear

    //let whiteRoundedView : UIView = UIView(frame: CGRect(10, 8, self.view.frame.size.width - 20, 149))
    let whiteRoundedView: UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.width - 20, height: 200))
    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.8])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubview(toBack: whiteRoundedView)

    //cell.categoryImageView.image = catImages[indexPath.row]
    //print("Product \(allCats[indexPath.row].name)")

    cell.categoryLabel.text = allCats[indexPath.row].name

    if let n = allCats[indexPath.row].name{
        con?.storage?.reference(withPath: "categories/\(n).png").data(withMaxSize: 10 * 1024 * 1024, completion: {
            data, error in
            if error == nil{
                let im = UIImage(data: data!)
                cell.categoryImageView.image = im
                cell.layoutSubviews()
            }
            else{
                print("Error Downloading Image \(error?.localizedDescription)")
            }
        })
    }
    return cell
}

所以上面是将图像设置为单元格中的 imageView 的代码。 问题

1. 当我向下滚动然后再次向上滚动时，相同单元格中的图像不同。
2. tableview 滚动很慢。

这些都是问题。请让我知道我该如何解决这个问题？ 我知道一个库 SDWebImage，但我不知道如何使用该库下载 Firebase 图像。请帮助我解决这个问题。我对这个问题感到非常疲惫。在过去的 20 个小时里，我一直试图在不睡觉的情况下解决它，但无法解决。请让我知道我做错了什么以及我应该如何解决这个问题。谢谢。

Answer 1

TableView 很慢，因为您一直在重新下载图像。

这是一个缓存问题。 至于同一单元格中的图像不同，您只需将图像重置为零即可更改，因为单元格正在被重复使用，它们使用的是以前的图像，而新的图像会下载。

但是如果你使用一些缓存框架，这两个问题都会得到解决，例如，可能最好的一个是SDWebImage。

如果您不想为此使用库。这是缓存图像的最基本实现。

let imageCache = NSCache<AnyObject, AnyObject>()

extension UIImageView {

    func loadImageUsingCacheWithUrlString(_ urlString: String) {

        self.image = nil

        //check cache for image
        if let cachedImage = imageCache.object(forKey: urlString as AnyObject) as? UIImage {
            self.image = cachedImage
            return
        }

        //otherwise start the download
        let url = URL(string: urlString)
        URLSession.shared.dataTask(with: url!, completionHandler: { (data, response, error) in

            //there was an error with the download
            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
                }
            })

        }).resume()
    }

}

用法：

cell.categoryImageView.loadImageUsingCacheWithUrlString("your firebase url string")

编辑：是的，您可以使用它来下载存储在 Firebase 中的图像。

编辑：此代码将解决您的问题，但这里不考虑内存管理，对于一个严肃的生产应用程序，我建议查看专用于图像缓存的库。

编辑：我刚刚注意到 Firebase 文档中有适当的信息，展示了它如何与 SDWebImage 一起使用。看看吧：SDWebImage + Firebase