从服务器加载的 CollectionView/TableView 中的图像问题，不会立即加载到每个单元格中

Question

当我通过简单查询从 Parse-Server 加载图像时，我遇到了这个奇怪的问题。

我有一个叫做“食谱”的课程，我有这些专栏。

• 名称（字符串）

• 图像（文件）

  等等

这是我从该类加载食谱的代码。

override func viewDidLoad() {
        super.viewDidLoad()
 queryRecipes("")
}


func queryRecipes(searchText:String) {

self.recipesArray.removeAllObjects()
    
    
    let query = PFQuery(className: "Recipes")
query.orderByDescending("createdAt")

 query.findObjectsInBackgroundWithBlock { (objects, error)-> Void in
        if error == nil {
            self.recipesArray = NSMutableArray(array: objects!)
            // Reload CollView
            self.recipesCollView.reloadData()
            self.view.hideHUD()
                        
            // Hide/show the nothing found Label
            if self.recipesArray.count == 0 {     self.nothingFoundLabel.hidden = false
            } else { self.nothingFoundLabel.hidden = true }
            
        } else {
            print(error)
        } }
        

}

然后是集合视图代码

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return recipesArray.count
    }

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("RecipesCell", forIndexPath: indexPath) as! RecipesCell
    
    var recipesClass = PFObject(className: "Recipes")
    recipesClass = recipesArray[indexPath.row] as! PFObject
    cell.titleLabel.text = "\(recipesClass["name"]!)"

let imageFile = recipesClass["image"] as? PFFile
cell.coverImage.file = imageFile
cell.coverImage.loadInBackground(nil)
   cell.layer.shouldRasterize = true
    cell.layer.rasterizationScale = UIScreen.mainScreen().scale
    
return cell
}

在单元格文件中我有以下内容

import UIKit
import ParseUI

class RecipesCell: UICollectionViewCell {
    
    /* Views */
    @IBOutlet weak var coverImage: PFImageView!
    @IBOutlet weak var titleLabel: UILabel!
}

我已经从图像视图中的 main.storyboard 设置了这个类。

所以问题是我有 10 张图片。 当我转到某个视图时，它会显示我可以在手机中看到的前 4 个视图，它会很好地加载它们。但是当我向下滚动以在接下来的 6 个单元格中查看更多内容时，它会显示例如

第 5 个单元格 -> 第 1 个单元格的图像，然后是第 5 个单元格的图像。 第 6 个单元格 -> 其他单元格之一的随机图像，然后继续。

但是当我刷新时我没有看到任何这种反应。

有人知道为什么会这样吗？ 我认为我的代码是合法的，但我遗漏了一些东西。

感谢您的宝贵时间。

PS，tableview 也会发生这种情况。

PS2。我也试过这个。在情节提要中，我为 uiimage 设置了一个静态图像，但它仍然使这个东西加载不同的图像，然后加载正确的图像。

Answer 1

单元格正在被重用，这意味着当您将一个单元格出列时，它可能会与其中的其他数据一起返回（它已经实例化，现在被重用）。所以你基本上需要在展示之前做一个“清理”。

同样的事情发生在文本上，但是因为它不是从服务器加载的，也不是你在屏幕上看不到的任何东西。

所以你需要做的是将图像设置为占位符图像

cell.coverImage.image = UIImage(named:"placeholder")

就在这一行之前：

cell.coverImage.file = imageFile

我希望这会有所帮助。 :)

Answer 2

这一切都是因为细胞被重复使用了。

1。单元格被重复使用，因此您需要在重复使用之前将其清除/设置为默认值。

2。单元格被重复使用，并且滚动可以比从服务器获取图像更快：因此错误的完成回调可能会发生在错误的单元格中！。当图像完成加载后，您需要检查单元格是否仍应加载图像，或者在此期间是否重复使用（这意味着它正在加载另一个图像 - 因此可能导致您提到的图像闪烁）。

let imageFile = recipesClass["image"] as? PFFile
cell.coverImage.image = nil // 1. Clearing the cell
// or as in Abavisg's answer you load the default image instead of nil
cell.coverImage.file = imageFile

// This is kind of pseudocode as I'm not familiar with the Parses' API
cell.coverImage.loadInBackground() { loadedImage in
   // 2. Here you have to check if the loadedImage is the right image 
   // for the cell
   if ( loadedImage.imageFile == imageFile) {
    //loadTheImage
   } else {
    //skipLoadingTheImage -> The cell was reused
   }
}