除非滚动，否则 UICollectionViewCells 不会加载

Question

我有一个UICollectionView，我用单元格填充它。

我有一个加载动画，它会停止以指示所有单元格都已填充，但在我滚动之前单元格不会显示（可能需要尝试几次）。

这类似于：

UICollectionView not loading fully until I scroll

但不同的是，我的不会部分加载 - 但根本不会。

我的UICollectionViewDataSource：

extension ProductsCollectionViewController: UICollectionViewDataSource
{

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        if searchActive
        {
            return filtered.count
        }
        else
        {
            return products.count    //return number of rows in section
        }
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "product_collection_cell", for: indexPath) as! ProductsCollectionViewCell
        cell.ProductImageView.image = nil
        cell.ProductName.text = nil
        cell.ProductPrice.text = nil
        cell.productUniqueID = nil

        let prodInCell =  searchActive ? filtered[indexPath.row] : products[indexPath.row]

        let prodID = prodInCell.getUniqueID()
        let dbRef = Storage.storage().reference().child(prodID).child("pic0.jpg")
        cell.contentMode = .scaleAspectFit
        cell.ProductImageView.image = #imageLiteral(resourceName: "DefaultProductImage")
        dbRef.downloadURL(completion:
            {
                url, error in
                if let error = error
                {
                    print (error)
                }
                else if let url = url
                {
                    cell.ProductImageView.loadImageUsingUrlString(urlString: url.absoluteString)
                    cell.ProductImageView.contentMode = UIViewContentMode.scaleToFill
                    cell.layoutIfNeeded()
                }
        })
        cell.ProductImageView.clipsToBounds = true

        //cell.ProductName = UILabel()
        cell.ProductName.text = prodInCell.getName()

        //cell.ProductPrice = UILabel()
        cell.ProductPrice.text = String(prodInCell.getPrice())
        cell.productUniqueID = prodInCell.getUniqueID()
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
    {
        // Display selected Item
        prodToLoad = products[indexPath.row]
        performSegue(withIdentifier: "view_product_information", sender:self  )
    }

    // Swift 3.0
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: CGFloat((collectionView.frame.size.width / 3) - 20), height: CGFloat(100))
    }
}

我做错了什么？

Answer 1

在 cellForRowAt 内部，你有 2 个异步操作

1-

dbRef.downloadURL(completion:

2-

cell.ProductImageView.loadImageUsingUrlString(urlString: url.absoluteString)

考虑使用SDWebImage，因为这样会多次下载同一张图片

//

在数组项自定义类/结构中创建一个可选的urlStr 属性，并在下载时设置它

if let str = prodInCell.urlStr {

    cell.ProductImageView.sd_setImage(with: URL(string:str), placeholderImage: UIImage(named: "placeholder.png"))
}
else {

       let dbRef = Storage.storage().reference().child(prodID).child("pic0.jpg")
       cell.contentMode = .scaleAspectFit
       cell.ProductImageView.image = #imageLiteral(resourceName: "DefaultProductImage")
       dbRef.downloadURL(completion:
        {
            url, error in
            if let error = error
            {
                print (error)
            }
            else if let url = url
            {
               prodInCell.urlStr = url.absoluteString // store for upcoming need
               cell.ProductImageView.sd_setImage(with: URL(string:url.absoluteString), placeholderImage: UIImage(named: "placeholder.png"))      
               cell.ProductImageView.contentMode = UIViewContentMode.scaleToFill
               cell.layoutIfNeeded()
            }
    })

 }

//

还记得

import SDWebImage

并设置要加载的项目包中的任何占位符图像，直到下载真实图像