Images in UITableView keep re-loading and wrong images flash while scrolling in swift

Question

The application has a UITable View which loads dynamic images into cells. Images are downloaded while scrolling and they are converted into UIImages. Those UIImages will be set to the ImageView with help of KingFisher. Simple Cache mechanism has been already implemented but images are flash on scroll until the exact image loads. Code is mentioned below.

Table View Code

    extension EmployeeListViewController:UITableViewDelegate,UITableViewDataSource {
    
         func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
         let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: EmployeeTableViewCell.self), for: indexPath) as! EmployeeTableViewCell
         cell.onBindCell(management: (employeePresenter?.getManagementItem(position: indexPath.row))!)
         cell.actionCallBack = self
                    
         let empIdNumber = NSString(string: (directoryPresenter!.getManagementItem(position: indexPath.row).agmid))
                    
                      
         if let cachedImage = self.cache.object(forKey: empIdNumber) {
                cell.profileImage.kf.base.image = cachedImage
         } else {
                directoryPresenter?.getProfileImage(id: empIdNumber as String) { image in
                cell.profileImage.kf.base.image = image
                self.cache.setObject(image!, forKey: empIdNumber)
          }
        }
        return cell
       }
    }

Data Binding inside the Custom cell

I made the image data nil before reuse

override func prepareForReuse() {
    profileImage.kf.base.image = nil
}

And set respective data inside onBind() data method.

func onBindCell(management: Management) {
    name.text = management.getEmployeeDisplayName()
    
    // Place Holder
    profileImage.kf.base.image = UIImage(named: management.details.gender == "M" ? "placeholder_profile_male" : "placeholder_profile_female")
    
}

But Still, images blink when scrolling down the view for the first time. After the exact image is loaded it won't blick. How to sort the initial blinking issue on first scroll?

Why do you keep your own cache? Kingfisher should already handle it. Also, it should provide a placeholder, so you might call the KingFisher method which can has a placeholder in setting method. — Larme, Feb 01 '22 at 10:49
@Larme Remote image resource retrieves as Base64 String So that URL can not be directly set to the KingFisher. The images will be loaded to the memory and converted the string to UIImage. — KZoNE, Feb 02 '22 at 03:58
Is your issue linked to DataURI? What about creating a correct handler in KingFisher that will decode the remote url data image? — Larme, Feb 02 '22 at 10:31

score 0 · Answer 1 · answered Feb 02 '22 at 11:50

What about still using KingFisher but telling it how to interpret/process the downloaded data?

Let's create our own ImageProcessor:

struct CustomBase64Processor: ImageProcessor {

    var identifier: String = "com.larme.customBase64Processor"
    var encoding: String.Encoding = .utf8

    func process(item: ImageProcessItem, options: KingfisherParsedOptionsInfo) -> KFCrossPlatformImage? {
        print("CustomBase64Processor Processing: \(item)")
        switch item {
        case .image(let image):
            return image
        case .data(let data):
            // Strip the Base 64 data
            if let utf8String = String(data: data, encoding: encoding) {
                //Remove Data URI if needed
                let base64String = utf8String.replacingOccurrences(of: "data:image\\/.*?;base64,",
                                                                   with: "",
                                                                   options: .regularExpression)
                // Convert into a Data the Base64 Encoded String
                if let cleanedData = Data(base64Encoded: base64String.trimmingCharacters(in: .whitespacesAndNewlines)) {
                    return KFCrossPlatformImage(data: cleanedData)
                } else {
                    // Just an attempt here, but in fact it could be a gif, and that's not supported.
                    // Let's rely on KFCrossPlatformImage initilization
                    return KFCrossPlatformImage(data: Data(base64String.utf8))
                }
            } else {
                //Default image data aren't UTF8 Convertible, and are "ready to process"
                return KFCrossPlatformImage(data: data)
            }
        }
    }
}

I was wondering if you had Data URI (since it made me think of related question), ie the content is data:image/png;base64,theBase64Data, so I added a removal of it if needed.

In use, it's like that:

imageView.kf.setImage(with: url,
                      placeholder: nil,
                      options: [.processor(CustomBase64Processor())]) { result in
    print("KingFisher callback: \(result)")
    switch result {
    case .success(let imageresult):
        print("Success: \(imageresult)")
    case .failure(let error):
        print("Error: \(error)")
    }
}

Be careful, since I made a processor, we should get a data to interpret. So if you want to use other processing (like resizing, etc.) process the base 64 before to have a real working image first.

It's not fully tested, but I guess it could be a good start.

score -1 · Answer 2 · answered Feb 16 '22 at 12:04

-1

I think you should use a library to load images from url

answered Feb 16 '22 at 12:04

Rahul John

468
1
3
6

2

That's already the case, the author uses KingFisher – Larme Feb 17 '22 at 08:31

Images in UITableView keep re-loading and wrong images flash while scrolling in swift

2 Answers2