UITableView прыгают изображения полученные с сервера?

Question

[Lorem Ipsum]

Всем привет! Получаю url изображения с сервера, загружаю картинку и ставлю ее в UIImageView, при скролле очень странно картинки себя ведут, подменяются как будто. В чем может быть дело? Видео для наглядности - https://vk.com/video-58860049_456239362

extension UIImageView {
    func load(url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

extension NewsViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return newsArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier) as! NewsTableViewCell
        let newsItem = newsArray[indexPath.row]
        
        cell.titleLabel?.text = newsItem.postTitle
        cell.shortDestLabel?.text = newsItem.postShortDesc
        cell.dateLabel?.text = newsItem.postDate
        
        let imageUrlString = newsItem.postImageUrl!.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
        
        cell.coverImageView?.load(url: URL(string: imageUrlString!)!)
        
        return cell
    }
}

Comments

[Модератор]

Lorem Ipsum читаем п. 3.8 регламента работы сервиса и исправляем. Спасибо.

[Lorem Ipsum]

Модератор, упс, исправил!

[briahas]

Подожду исправлений автора, потом отвечу.

[Lorem Ipsum]

briahas, исправил)

Answer 1

[briahas]

Ячейки то переиспользуются. А блок внутри load(url:) привязан к self. coverImageView, значит при переиспользовании ячейки он не обнулится и продолжит выполнение....параллельно с еще одним блоком.
Значит, надо удалять старый блок.

Comments

[Lorem Ipsum]

точно, спасибо!)

[Lorem Ipsum]

Правильно ли я понял? Обнуление не помогло(

override func prepareForReuse() {
        super.prepareForReuse()
        self.coverImageView?.image = nil
    }

[briahas]

Вы не правильно поняли. Обнулять надо не картинку, а кложуру (блок) в которой выполняется подгрузка картинки. А чтобы его обнулить - его надо гдето хранить. Но, у вас такая архитектура, что я не вижу нормального способа реализовать это.

Попробуйте совет Ивана(который ниже). Сохраняйте в ячейке урлу, а когда выполнится UIImage(data: data) - проверяйте url и self.url. Если разные - не присваивать

[Lorem Ipsum]

briahas, разобрался, спасибо за помощь!)

Answer 2

[Иван Воробей]

Это система переиспользования. Вытягивается готовая ячейка и конфигурируется в методе. У меня есть видео об этой проблеме, глянуть можно тут. В видео я рассматривал трабл на примере чекмарка, но ситуация справедлива для любых элементов. Ячейку нужно конфигурировать однозначно.

Вытекающая проблема — повторная загрузка картинки. Если для ячейки с индексом 2 инфицировали загрузку изображения, а ячейка 3 была сделана из копии 2, то картинка будет установлена и для третьей ячейки. Вам нужно объявить параметр индекса в ячейке и перед установкой картинки или стартом загрузки убедится что индекс правильный.

Система переиспользования не сложная штука. Аналогичный принцип работает и в коллекциях.

Comments

[Lorem Ipsum]

спасибо!) подписался :D

[Lorem Ipsum]

Не помогло(

override func prepareForReuse() {
        super.prepareForReuse()
        self.coverImageView?.image = nil
    }

[Иван Воробей]

Lorem Ipsum, это половина решения. Второй абзац - вторая часть проблемы.