Image in collectionView cell causing Terminated due to memory issue

拟墨画扇 提交于 2020-12-15 05:18:10

问题


I looked at several answers for this problem but none helped.

vc1 is a regular vc, I grab 20 images from firebase, in vc2 I use ARKit to display those images upon user selection. I have a collectionView in vc2 that paginates 20 more images from firebase. The problem is when the next 20 images are loading and I start scrolling, the app crashes with Message from debugger: Terminated due to memory issue. When scrolling those new images, I look at the memory graph and it shoots up to 1 gig, so that's the reason for the crash. ARKit and the nodes I have floating around also contribute to the memory bump but they are not the reason for the crash as stated below.

1- Inside the cell I use SDWebImage to display the image inside the imageView. Once I comment out SDWebImage everything works, scrolling is smooth, and no more crashes but of course I can't see the image. I switched to URLSession.shared.dataTask and the same memory issue reoccurs.

2- The images were initially taken with the iPhone full screen camera and saved with jpegData(compressionQuality: 0.3). The cell size is 40x40. Inside the the SDWebImage completion block I tried to resize the image but the memory crash still persists.

3- I used Instruments > Leaks to look for memory leaks and a few Foundation leaks appeared but when I dismiss vc2 Deinit always runs. Inside vc2 there aren't any long running timers or loops and I use [weak self] inside all of the closures.

4- As I stated in the second point the problem is definitely the imageView/image because once I remove it from the process everything works fine. If I don't show any images everything works fine (40 red imageViews with no images inside of them will appear).

What can I do to fix this issue?

Paginating to pull more images

for child in snapshot.children.allObjects as! [DataSnapshot] {

    guard let dict = child.value as? [String:Any] else { continue }
    let post = Post(dict: dict)

    datasource.append(post)

    let lastIndex = datasource.count - 1
    let indexPath = IndexPath(item: lastIndex, section: 0)
    UIView.performWithoutAnimation {
        collectionView.insertItems(at: [indexPath])
    }
}

cellForItem:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: self.cellId, for: indexPath) as! PostCell

    cell.resetAll()
    cell.post = dataSource[indexPath.item]

    return cell
}

PostCell

private lazy var imageView: UIImageView = {
    let iv = UIImageView()
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.contentMode = .scaleAspectFill
    iv.layer.cornerRadius = 15
    iv.layer.masksToBounds = true
    iv.backgroundColor = .red
    iv.isHidden = true
    return iv
}()

private lazy var spinner: UIActivityIndicatorView = {
    let actIndi = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.medium) // ...
}()

var post: Post? {
    didSet {

        guard let urlSr = post?.urlStr, let url = URL(string: urlSr) else { return }

        spinner.startAnimating()

        // if I comment this out everything works fine
        imageView.sd_setImage(with: url, placeholderImage: placeHolderImage, options: [], completed: { 
            [weak self] (image, error, cache, url) in

            // in here I tried resizing the image but no diff

            DispatchQueue.main.async { [weak self] in
               self?.showAll()
            }
         })

        setAnchors() 
    }
}

func resetAll() {
     spinner.stopAnimating()
     imageView.image = nil
     imageView.removeFromSuperView()
     imageView.isHidden = true
}

func showAll() {
     spinner.stopAnimating()
     imageView.isHidden = false
}

func setAnchors() {

    contentView.addSubview(imageView)
    imageView.addSubview(cellSpinner)
    // imageView is pinned to all sides
}

回答1:


In the comments @matt was 100% correct , the problem was the images were too large for the collectionView at size 40x40, I needed to resize the images. For some reason the resize link in my question didn't work so I used this to resize image instead. I also used URLSession and this answer

I did it in 10 steps, all commented out

// 0. set this anywhere outside any class
let imageCache = NSCache<AnyObject, AnyObject>()

PostCell:

private lazy var imageView: UIImageView = { ... }()
private lazy var spinner: UIActivityIndicatorView = { ... }()

// 1. override prepareForReuse, cancel the task and set it to nil, and set the imageView.image to nil so that the wrong images don't appear while scrolling
override func prepareForReuse() {
    super.prepareForReuse()
    
    task?.cancel()
    task = nil
    imageView.image = nil
}

// 2. add a var to start/stop a urlSession when the cell isn't on screen
private var task: URLSessionDataTask?

var post: Post? {
    didSet {

        guard let urlStr = post?.urlStr else { return }

        spinner.startAnimating()

        // 3. crate the new image from this function
        createImageFrom(urlStr)

        setAnchors() 
    }
}

func createImageFrom(_ urlStr: String) {
    
    if let cachedImage = imageCache.object(forKey: urlStr as AnyObject) as? UIImage {
        
        // 4. if the image is in cache call this function to show the image
        showAllAndSetImageView(with: cachedImage)
        
    } else {
        
        guard let url = URL(string: urlStr) else { return }

        // 5. if the image is not in cache start a urlSession and initialize it with the task variable from step 2
        task = URLSession.shared.dataTask(with: url, completionHandler: {
            [weak self](data, response, error) in
            
            if let error = error { return }
            
            if let response = response as? HTTPURLResponse {
                print("response.statusCode: \(response.statusCode)")
                guard 200 ..< 300 ~= response.statusCode else { return }
            }
            
            guard let data = data, let image = UIImage(data: data) else { return }
            
            // 6. add the image to cache
            imageCache.setObject(image, forKey: photoUrlStr as AnyObject)
            
            DispatchQueue.main.async { [weak self] in

                // 7. call this function to show the image
                self?.showAllAndSetImageView(with: image)
            }
            
        })
        task?.resume()
    }
}

func showAllAndSetImageView(with image: UIImage) {

    // 8. resize the image
    let resizedImage = resizeImageToCenter(image: image, size: 40) // can also use self.frame.height

    imageView.image = resizeImage

    showAll()
}

// 9. func to resize the image
func resizeImageToCenter(image: UIImage, size: CGFloat) -> UIImage {
    let size = CGSize(width: size, height: size)

    // Define rect for thumbnail
    let scale = max(size.width/image.size.width, size.height/image.size.height)
    let width = image.size.width * scale
    let height = image.size.height * scale
    let x = (size.width - width) / CGFloat(2)
    let y = (size.height - height) / CGFloat(2)
    let thumbnailRect = CGRect.init(x: x, y: y, width: width, height: height)

    // Generate thumbnail from image
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    image.draw(in: thumbnailRect)
    let thumbnail = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return thumbnail!
}

func resetAll() { ... }
func showAll() { ... }
func setAnchors() { ... }


来源:https://stackoverflow.com/questions/63855711/image-in-collectionview-cell-causing-terminated-due-to-memory-issue

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!