如何延迟加载本地数据库中存储为Data类型的图片？

核心问题拆解 #

你当前的卡顿源于UIImage(data:)在主线程同步执行，切换标签时所有图片会一次性初始化，阻塞UI线程。要解决这个问题，需要做到三点：异步加载（后台线程处理图片初始化）、缓存复用（避免重复计算）、懒加载（仅视图可见时触发加载）。

具体实现方案 #

1. 封装图片加载缓存管理器 #

这个类负责在后台处理图片初始化，同时缓存已加载的图片，避免重复消耗资源：

import SwiftUI
import Combine

class ImageLoader: ObservableObject {
    @Published var uiImage: UIImage?
    // 用NSCache做缓存，内存不足时自动释放，比字典更安全
    private let cache = NSCache<NSData, UIImage>()
    private var cancellables = Set<AnyCancellable>()
    
    func loadImage(from data: Data) {
        // 先查缓存，命中直接返回
        if let cachedImage = cache.object(forKey: data as NSData) {
            uiImage = cachedImage
            return
        }
        
        // 后台线程处理图片初始化，不卡主线程
        DispatchQueue.global(qos: .userInitiated).async { [weak self] in
            guard let self = self else { return }
            let image = UIImage(data: data) ?? UIImage(named: "NotFound")!
            // 缓存结果
            self.cache.setObject(image, forKey: data as NSData)
            // 回到主线程更新UI
            DispatchQueue.main.async {
                self.uiImage = image
            }
        }
    }
}

2. 自定义异步本地图片视图 #

把加载逻辑封装成独立View，复用性更强，且只在视图出现时触发加载：

struct AsyncLocalImage: View {
    let imageData: Data
    @StateObject private var loader = ImageLoader()
    
    var body: some View {
        Group {
            if let image = loader.uiImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else {
                // 加载中的占位图，可自定义
                Image(systemName: "photo.fill")
                    .foregroundColor(.gray)
                    .font(.title)
                    .onAppear {
                        // 视图进入可见范围时才开始加载
                        loader.loadImage(from: imageData)
                    }
            }
        }
    }
}

3. 配合懒加载容器使用 #

用LazyVStack（或LazyHStack）替代普通容器，确保只有当视图滚动到屏幕内时才初始化图片视图，真正实现延迟加载：

struct ContentView: View {
    var dataArr: [Data] = []
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 16) {
                ForEach(dataArr, id: \.self) { imageData in
                    AsyncLocalImage(imageData: imageData)
                        .frame(height: 220)
                        .cornerRadius(8)
                        .padding(.horizontal)
                }
            }
        }
    }
}

额外优化建议 #

• 持久化缓存：如果需要APP重启后保留已加载的图片，可以把缓存的图片存到本地沙盒，下次启动先读取本地文件，再从数据库加载Data。
• 内存监控：如果图片数量极大，可以在ImageLoader中添加缓存大小限制，避免内存占用过高。
• 错误处理：可以给UIImage初始化失败的情况添加更友好的占位图，或者提示用户图片损坏。

内容的提问来源于stack exchange，提问作者sfung3