UICollectionView: When loading an image from a URL, do they start jumping from column to column?

Question

iOS

Good afternoon!
I am loading data from a website into a UICollectionView. At the same time, the text data is displayed normally, but the pictures strangely jump from cell to cell, that is, while the new one is being loaded, then the old one, as it were, instead of it, this is exactly what happens if there are a lot of cells, for example, 20 pieces, and when you scroll to the 10th, then there images from the top cells until a new one is loaded.

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell: ProductCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath) as! ProductCollectionViewCell

        cell.layer.borderColor = UIColor(red: 245 / 255, green: 245 / 255, blue: 245 / 255, alpha: 1).CGColor
        cell.layer.borderWidth = 0.5
        cell.backgroundColor = UIColor.whiteColor()
        
        cell.productTitle.text = productsTitle[indexPath.row]
        cell.productCost.text = productsCost[indexPath.row] + " грн."
        cell.productImage.image = nil
        cell.imageLoader.startAnimating()

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
            
            if self.cachedPhotos[indexPath.row] == nil {
       
                let imageThumbString = self.productsPhotos[indexPath.row]
                let imageUrl = NSURL(string: imageThumbString)
                let imageData = NSData(contentsOfURL: imageUrl!)
            
                dispatch_async(dispatch_get_main_queue(), {
                
                    if(imageData != nil){
                    
                        cell.productImage.image = UIImage(data: imageData!)
                        self.cachedPhotos[indexPath.row] = UIImage(data: imageData!)
                        cell.imageLoader.stopAnimating()
                        cell.imageLoader.hidden = true
                    
                    }
                
                });
                
            } else {
                
                cell.productImage.image = self.cachedPhotos[indexPath.row]
                
            }
            
        });

        return cell
        
    }

Answer 1

You need to first load all the objects into the array and only then fill in the cells, since the new cell has already been created and started to be filled, and the image for the old cell has not yet been downloaded. With a separate function, you fill the array with images in a certain order and only then fill in the cells.