Initial scroll lag in UITableView cells with resized large images?

Question

I'm basically having the same issue as this question:

My UITableView contains a UIImageView that is 87x123 size.

When my UITableViewController is loaded, it first calls a function that loops through an array of images. These images are high resolutions stored from the photo library. In each iteration, it retrieves the image and resize each image down to 87x123, then stores it back into the original image in the array.

When all the images has been resized and stored, it calls self.tableView.reloadData to populate the data in the array into the cells.

However, like the mentioned question, my UITablView is choppy and lags if I scroll fast before all the images has been resized and stored in the array.

Here's the problematic code:

extension UIImage
{
    func resizeImage(originalImage: UIImage, scaledTo size: CGSize) -> UIImage
    {
        // Avoid redundant drawing
        if originalImage.size.equalTo(size)
        {
            return originalImage
        }

        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        originalImage.draw(in: CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(size.width), height: CGFloat(size.height)))

        let image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        return image
    }
}

func loadImages()
{   
    DispatchQueue.global(qos: .background).async {

        for index in 0.. UITableViewCell
{
    ...

    // Size is 87x123
    let thumbnailImage = cell.viewWithTag(1) as! UIImageView

    DispatchQueue.main.async{

        thumbnailImage.image = self.myArray[indexPath.row]

    }

    thumbnailImage.contentMode = UIViewContentMode.scaleAspectFill

    thumbnailImage.layer.borderColor = UIColor.black.cgColor
    thumbnailImage.layer.borderWidth = 1.0
    thumbnailImage.clipsToBounds = true

    return cell
}

I know to do any Non-UI operations in the background thread, which is what I do. Then all I do in cellForRowAt is load the image into the cell using its indexPath.row.

The problem is, as previously mentioned, if I start to scroll the UITableView BEFORE FINISHED RESIZING ALL IMAGES is printed out, i.e. before all the images has been resized, there is noticeable lag and slowness.

However, if I wait UNTIL all the images has been resized and FINISHED RESIZING ALL IMAGES is called before scrolling the UITableView, the scrolling is smooth without any lags.

I can put a loading indicator and have the user wait until all images has been resized and loaded into the cells before having user interaction, but that would be an annoyance since it takes about 8 seconds to resize all the high-res images (18 images to resize).

Is there a better way I can fix this lag?

UPDATE: Following @iWheelBuy's second example, I've implemented the following:

final class ResizeOperation: Operation {

    private(set) var image: UIImage
    let index: Int
    let size: CGSize

    init(image: UIImage, index: Int, size: CGSize) {
        self.image = image
        self.index = index
        self.size = size
        super.init()
    }

    override func main() {
        image = image.resizeImage(originalImage: image, scaledTo: size)
    }
}

class MyTableViewController: UITableViewController
{
    ...

    lazy var resizeQueue: OperationQueue = self.getQueue()

    var myArray: [Information] = []

    internal struct Information
    {
        var title: String?
        var image: UIImage?

        init()
        {

        }
    }

    override func viewDidLoad()
    {
        ....

        loadImages()

        ...
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        ...

        // Size is 87x123
        let thumbnailImage = cell.viewWithTag(1) as! UIImageView

        DispatchQueue.main.async{

            thumbnailImage.image = self.myArray[indexPath.row].image

        }

        thumbnailImage.contentMode = UIViewContentMode.scaleAspectFill

        return cell
    }

    func loadImages()
    {
        let size = CGSize(width: 87, height: 123)

        for item in myArray
        {
            let operations = self.myArray.enumerated().map({ ResizeOperation(image: item.image!, index: $0.offset, size: size) })

            operations.forEach { [weak queue = resizeQueue, weak controller = self] (operation) in
                operation.completionBlock = { [operation] in
                    DispatchQueue.main.async { [image = operation.image, index = operation.index] in

                        self.update(image: image, index: index)
                    }
                }
                queue?.addOperation(operation)
            }
        }
    }

    func update(image: UIImage, index: Int)
    {
        myArray[index].image = image

        tableView.reloadRows(at: [IndexPath(row: index, section: 0)], with: UITableViewRowAnimation.fade)

    }    
}

However, upon calling tableView.reloadRows, I receive a crash with the error:

attempt to delete row 0 from section 0, but there are only 0 sections before the update

I'm a bit confused on what it means and how to resolve it.

Initial scroll lag in UITableView cells with resized large images?

Answers (1)

Related Questions