Gif disappears in UITableViewCell

Question

I'm using the answer of this question: How to load GIF image in Swift? and I'm adding the gif into UITableViewCell. When you open the table, it works and it is animating, but when I go to another UIViewController and return to the UITableViewController the gif is not there. It appears only when you .touchUpOutside the UITableViewCell. How to fix that issue ?

class CustomCell: UITableViewCell{

    @IBOutlet weak var theImageView: UIImageView!{
        didSet{
            let loadingGif = UIImage.gifImageWithName("loading")
            theImageView.image = loadingGif
        }
    }
}

How are you "going to another UIViewController"? Are you using segues or a navigation controller or what? You may be creating a second instance of the UIViewController that has the table view in it. See if this post about segueing to a view controller and then segueing back is useful: https://stackoverflow.com/questions/58260379/tableview-keeps-going-back-to-top-after-leaving-to-detailed-vc/58260705#58260705 — David Chopin, Oct 13 '19 at 21:24
With BarButtonItem or UITableViewCell click doesn't matter. When the UITableViewController disappear the gif also disappear. Use the code above and and add gif to UITableViewCell to see. — Bogdan Bogdanov, Oct 14 '19 at 12:28

kirami · Accepted Answer · 2019-10-17T09:13:46.477

I'm going to show all stages of showing animated gif on the UITableViewCell

1) This is my GifTableViewController that contains a UITableView

import UIKit

class GifTableViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!

    var gifs = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()

        loadGifs()
    }

    func loadGifs() {
        gifs.append("https://media.giphy.com/media/XIqCQx02E1U9W/giphy.gif")
        gifs.append("https://media.giphy.com/media/11JTxkrmq4bGE0/giphy.gif")
        gifs.append("https://media.giphy.com/media/eoxomXXVL2S0E/giphy.gif")
        gifs.append("https://media.giphy.com/media/c5wbvuaVVLWzC/giphy.gif")
        gifs.append("https://media.giphy.com/media/l9Jhzwdi09Ve0/giphy.gif")
        gifs.append("https://media.giphy.com/media/8h1Zhv62CVXEc/giphy.gif")
        gifs.append("https://media.giphy.com/media/FgiHOQyKUJmwg/giphy.gif")
        gifs.append("https://media.giphy.com/media/h2MLtoOjxtkGY/giphy.gif")
        gifs.append("https://media.giphy.com/media/ClKnUxoh4SP16/giphy.gif")
        gifs.append("https://media.giphy.com/media/S6fA9ppFTwFhK/giphy.gif")
        gifs.append("https://media.giphy.com/media/EGiBhTZMXedIA/giphy.gif")
    }

}


extension GifTableViewController: UITableViewDataSource, UITableViewDelegate {

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return gifs.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "GifTableCell", for: indexPath) as! GifTableCell
        cell.load(with: gifs[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200
    }

}

2) This is my GifTableCell that contains a UIImageView which will represent gif on

import UIKit

class GifTableCell: UITableViewCell {

    @IBOutlet weak var gifImageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

    func load(with urlString: String) {
        gifImageView.image = nil
        DispatchQueue.global().async { [weak self] in
            guard let url = URL(string: urlString as String) else {
                return
            }
            guard let data = try? Data(contentsOf: url) else {
                return
            }

            DispatchQueue.main.async {
                self?.gifImageView.image = UIImage.gif(data: data)
            }
        }
    }

}

3) Notice that UIImage.gif(data: data) statement. The gif function is an UIImage extension from the SwiftGifOrigin library

See source: https://github.com/swiftgif/SwiftGif

You can add only UIImage+Gif.swift file in order to use by simply, or include SwiftGifOrigin library into your project.

Edits for question update;

The above example shows that gifs are loaded from url. Your case is actually much simpler, your cell should be like this.

class CustomCell: UITableViewCell{

    @IBOutlet weak var theImageView: UIImageView!

    func loadGif() {
        theImageView.image = nil
        DispatchQueue.global().async { [weak self] in
            let loadingGif = UIImage.gifImageWithName("loading")
            DispatchQueue.main.async {
                self?.theImageView.image = loadingGif
            }
        }
    }

}

Gif disappears in UITableViewCell

1 Answers1