在tableview單元格中顯示舊圖像

Question

我有一個帶有電影海報圖像的表格視圖，但是當我上下滾動列表時，我注意到需要幾秒鍾才能顯示正確的海報，或者我必須再滾動一點直到出現正確的圖像如下圖所示

* 如果圖片是黑色的，點擊它查看

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MovieTableCell
            let entity = listOfMovies[indexPath.row]
            cell.movie = entity
            cell.movieTitle.text = entity.title
            cell.moviesReleaseDate.text = entity.releaseDate
            cell.voteAverage.text = "\(entity.voteAverage)"
            getMoviePoster(entity.backdropPath) { (image) in
                cell.moviePoster.image = image
            }


  func getMoviePoster(_ imagePath: String , completion: @escaping (_ image: UIImage) -> Void ) -> Void {
        webserviceManager().getMoviePoster(imagePath:imagePath) { (success, image) in
            if success {
                completion(image!)
            }
        }
    }

    func getMoviePoster(imagePath:String, completion: @escaping (_ success:Bool, _ image:UIImage?) -> Void ) -> Void {
        if Connectivity.isConnectedToInternet {
            let url = "https://image.tmdb.org/t/p/w500\(imagePath)"
            Alamofire.request(url, method: .get, parameters: nil, encoding: JSONEncoding.default, headers: nil).responseImage { (respones) in
                if respones.data != nil {
                    let webRespones = respones.result.value
                    completion (true,webRespones)
                } else {
                    completion (false,nil)
                }
            }
        } else {
            completion (false,nil)

        }
    }

Answer 1

一個簡單的解決方案是將屬性image添加到數據模型

var image : UIImage?

在cellForRow檢查圖像是否存在。 如果顯示，則不下載

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MovieTableCell
    let entity = listOfMovies[indexPath.row]
    cell.movie = entity
    cell.movieTitle.text = entity.title
    cell.moviesReleaseDate.text = entity.releaseDate
    cell.voteAverage.text = "\(entity.voteAverage)"
    if let image = entity.image {
        cell.moviePoster.image = image
    } else {
        cell.moviePoster.image = nil
        getMoviePoster(entity.backdropPath) { (image) in
            listOfMovies[indexPath.row].image = image
            cell.moviePoster.image = image
        }
    }

但是，更好的解決方案是下載管理器，它可以處理單元格脫離屏幕的情況，並且如果可以插入，刪除或移動單元格，則該解決方案將不起作用。

Answer 2

這是由於您快速（也就是快速滾動）使單元出隊而引起的。

您可以通過在單元格prepareForReuse()函數中添加默認的占位符圖像或空白圖像來解決此問題。

  override func prepareForReuse() { // this is in my Custom Cell class
  imageView.image = UImage(named: "myPlaceholder") // this is will be called whenever you dequeue the cell . 
   }

Answer 3

簡單的答案只需在索引路徑的行的單元格開頭將圖像視圖設置為nil。 在索引路徑代碼處添加了行的單元格。 或者，您可以添加一些占位符圖像以顯示實際圖像正在加載。

在這里，您需要了解表視圖中可重用單元格的概念，滾動時，將重用頂部的單元格，並移至的底部以進一步使用，因此該單元格UI中的數據集應重設。

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

            cell.moviePoster.image = nil

            let entity = listOfMovies[indexPath.row]
            cell.movie = entity
            cell.movieTitle.text = entity.title
            cell.moviesReleaseDate.text = entity.releaseDate
            cell.voteAverage.text = "\(entity.voteAverage)"
            getMoviePoster(entity.backdropPath) { (image) in
                cell.moviePoster.image = image
            }

Answer 4

將此代碼添加到您的UITableViewCell文件：

override func prepareForReuse() {
        super.prepareForReuse()
        self.moviePoster.image = nil // will reset your image view
    }