Lazy loading ảnh trong Table View bằng Swift

Để tải ảnh bất đồng bộ (lazy loading) cho UITableViewCell, chúng ta dùng URLSession tải dữ liệu ảnh trên background thread, sau đó cập nhật UI trên main thread. Dưới đây là cách triển khai cơ bản.

1. Tạo Custom Cell

Tạo class CustomCell kế thừa UITableViewCell, có outlet imgView: UIImageView.

2. Extension UIImageView để tải ảnh từ URL

extension UIImageView {
    func setImageFromUrl(_ urlString: String) {
        guard let url = URL(string: urlString) else { return }
        
        URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
            guard let self = self,
                  let data = data,
                  error == nil,
                  let image = UIImage(data: data) else { return }
            
            DispatchQueue.main.async {
                self.image = image
            }
        }.resume()
    }
}

3. Sử dụng trong cellForRowAt

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as! CustomCell
    let imageUrl = "https://homepages.cae.wisc.edu/~ece533/images/boat.png"
    cell.imgView.setImageFromUrl(imageUrl)
    return cell
}

Kết quả

Vấn đề cần cải thiện (Production-ready)

Code trên là cơ bản. Ứng dụng thực tế cần xử lý:

• Caching: Lưu ảnh vào memory/disk cache (dùng NSCache hoặc thư viện Kingfisher, SDWebImage, Nuke).
• Placeholder: Hiển thị ảnh mặc định khi đang tải.
• Cancel task khi cell reuse: Hủy request cũ khi cell được dùng lại cho row khác.
• Error handling: Xử lý lỗi mạng, ảnh hỏng.

Khuyến nghị: Trong dự án thực tế, hãy dùng thư viện mature như Kingfisher (Swift), SDWebImage (ObjC/Swift), hoặc Nuke thay vì tự viết.