网络通话后，如何将所有图像附加到此阵列？

Question

I am parsing JSON into custom objects. Then I am converting those url string into image and loading it to a collectionView. The issue is I want to append all to UIImages into an array but the only images I can append come as the images show on screen/scroll. How can I solve this issue? Here is my code

import UIKit

class HomepageCollectionViewController: UICollectionViewController {
    var hingeImagesArray = [HingeImage]()
    var arrayToHoldConvertedUrlToUIImages = [UIImage]()
    var task: NSURLSessionDataTask?

    override func viewDidLoad() {
        super.viewDidLoad()

        // Makes the network call for HingeImages
        refreshItems()
    }

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return hingeImagesArray.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("imageReuseCell", forIndexPath: indexPath) as! ImageCollectionViewCell
        let image = hingeImagesArray[indexPath.row]

        if let imageURL = image.imageUrl {
            if let url = NSURL(string: imageURL) {
                // Request images asynchronously so the collection view does not slow down/lag
                self.task = NSURLSession.sharedSession().dataTaskWithURL(url, completionHandler: { (data, response, error) -> Void in
                    dispatch_async(dispatch_get_main_queue(), { () -> Void in
                        // Check if there is data returned
                        guard let data = data else {
                            return
                        }

                        // Create an image object from our data and assign it to cell

                        if let hingeImage = UIImage(data: data){
                             cell.collectionViewImage.image = hingeImage

                            //append converted Images to array so we can send them over to next view - only proble in that the only images converted at the ones you scrool to which is retarted

                            self.arrayToHoldConvertedUrlToUIImages.append(hingeImage)
                        }
                    })
                })

                task?.resume()
            }
        }

        return cell
    }

Answer 1

iOS collection and table views do not load all cells upon view load like an HTML table. The line that you have

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("imageReuseCell", forIndexPath: indexPath) as! ImageCollectionViewCell

to dequeue a reusable cell is doing just that. Every N cells (usually ~20-30 for a tableview) is recycled, so the UI element stays memory-efficient upon loading large sets of data.

In order to load all images at once, you will have to start loading all image urls in your arrayToHoldConvertedUrlToUIImages array in the viewDidLoad callback and cache the results (AFnetworking/Alamofire have great caching components). Then, load the image within the collection view cell from the cache and your scrolling UX will more streamlined.

However, I would suggest not going this caching route if you have A LOT of images because you could potentially crash your app.

Answer 2

In the gist, the cacheImages method will first check for the image if it exists in the cache (it doesn't obviously) and then download it in binary form into the cache. Then, after all images are downloaded and the collection view is refreshed, the cell will assign the image from the cache and since it is already in memory, it will load quickly.