ios - Firebase 存储异步图像下载随机顺序

Question

我正在尝试从 firebase 存储下载图像以显示在我的 collectionview 单元格中，但图像继续以随机顺序出现在单元格中。每个单元格都有一个从 firebase 存储(item1、item2 等)中检索到的标签，每次都会在正确的单元格中很好地显示。存储在 firebase 存储中的图像每个都将其存储 url 作为其在 firebase 数据库中各自项目名称的子项。

我成功地检索到每个图像 url，并下载所有图像并正确显示在单元格中，只是每次打开应用程序时它们都会以随机顺序出现，因此图像与项目名称不对应标签。

我意识到我需要异步下载图像，因此每个图像在继续下一个之前完成加载到正确的单元格中，但我在这样做时遇到了麻烦。到目前为止，这是我的代码:

    func downloadImg(completion: @escaping (UIImage?) -> ()) {
    let ref = Database.database().reference().child("somePath")
    ref.observeSingleEvent(of: .value) { (snapshot) in
        for item in snapshot.children {
            let snap = item as! DataSnapshot
            let imageSnap = snap.childSnapshot(forPath: "img/storageUrl")
            if let url = imageSnap.value as? String {
            let someRef = self.storageRef.reference(forURL: url)
                someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in
                    if let error = error {
                        print(error)
                    } else {
                        let image = UIImage(data: data!)
                        DispatchQueue.main.async {
                            completion(image)
                        }
                    }
                }
            }
        }
    }
}

然后我在 viewdidload 中调用我的函数:

    downloadImg { (completion) in
            self.itemPicArray.append(completion!)
            self.collectionView?.reloadData()
        }

最后我将我的单元格 ImageView 设置为 itemPicArray[indexPath.row]
就像我说的那样，这非常有效，只是图像不断随机显示。非常感谢帮助!

Answer 1

您的问题是每次图像进入时，您都会重新加载整个 Collection View 。根据图像的大小和网络的状态，图像几乎每次都会以不同的顺序出现。

考虑先下载所有图像，然后重新加载一次 Collection View 。如果有很多图像，请考虑对结果进行分页。您可以枚举循环并按此原始顺序对数据源数组进行排序。我添加了一个自定义数据对象来帮助解决这个问题。

class CustomObject {

    var image: UIImage?
    let n: Int

    init(image: UIImage?, n: Int) {
        self.image = image
        self.n = n
    }

}

let dispatch = DispatchGroup()

for (n, item) in snapshot.children.enumerated() {

    let object = CustomObject(image: nil, n: n) // init custom object with n (image is still nil)
    dispatch.enter() // enter dispatch

    someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in // download image
        if let error = error {
            print(error)
        } else {
            let image = UIImage(data: data!)
            object.image = image // inject custom object with image
            itemPicArray.append(object) // append to array
        }
        dispatch.leave() // leave dispatch
    }

}

dispatch.notify(queue: .global()) { // dispatch completion

    itemPicArray.sort { $0.n < $1.n } // sort by n (original download order)
    collectionView.reloadData() // reload collection view

}