UIImage缓存加载前占位图闪烁问题排查求助

问题诊断 #

从控制台输出「缓存未检测到」「从缓存读取」但无「找到缓存」的信息来看，核心问题是UrlImageModel无法正确读取缓存内容，导致每次进入视图都触发网络加载，占位图短暂闪烁。可能的原因包括：

• NSCache的自动回收机制：系统内存不足时，NSCache会自动清除缓存，导致缓存失效。
• URL字符串不一致：缓存的键（URL字符串）与读取时的URL存在细微差异（如大小写、多余斜杠、编码问题），无法匹配。
• UrlImageModel重复初始化：父视图重绘时，UrlImageView被重新创建，新的UrlImageModel提前执行缓存读取逻辑，此时URL可能尚未完全加载。

解决方案 #

1. 替换NSCache为内存字典（测试用） #

NSCache的自动回收特性容易导致缓存丢失，先改用Dictionary验证缓存逻辑是否正常：

class CacheImageManager {
    // 用Dictionary替代NSCache，避免自动回收
    private var cache = [String: UIImage]()
    
    func getCache(forKey: String) -> UIImage? {
        print("从缓存读取")
        return cache[forKey]
    }
    
    func setCache(forKey: String, image: UIImage) {
        print("保存到缓存")
        cache[forKey] = image
    }
}

extension CacheImageManager {
    private static var imageCache = CacheImageManager()
    static func getImageCache() -> CacheImageManager {
        imageCache
    }
}

2. 标准化URL字符串，确保缓存键一致 #

对URL字符串进行标准化处理，避免格式差异导致匹配失败：
在UrlImageModel中添加标准化方法：

class UrlImageModel: ObservableObject {
    // ... 原有代码 ...
    
    private func standardizedURLString() -> String? {
        guard let urlString = urlString, let url = URL(string: urlString) else {
            return nil
        }
        // 标准化URL，移除多余斜杠、统一格式
        return url.standardizedFileURL.absoluteString
    }
    
    // 修改缓存读取逻辑
    func loadImageFromCache() -> Bool {
        guard let standardizedKey = standardizedURLString() else {
            return false
        }
        
        guard let cacheImage = imageCache.getCache(forKey: standardizedKey) else {
            return false
        }
        image = cacheImage
        print("找到缓存")
        return true
    }
    
    // 修改缓存写入逻辑
    func getImageFromResponse(data: Data?, response: URLResponse?, error: Error?){
        // ... 原有错误处理代码 ...
        
        DispatchQueue.main.async {
            guard let loadedImage = UIImage(data: data) else {
                return
            }
            guard let standardizedKey = self.standardizedURLString() else {
                return
            }
            self.imageCache.setCache(forKey: standardizedKey, image: loadedImage)
            self.image = loadedImage
        }
    }
}

3. 优化UrlImageView的生命周期，避免重复初始化 #

使用@StateObject替代@ObservedObject，确保UrlImageModel在视图生命周期内只初始化一次（SwiftUI 2.0+）：

struct UrlImageView: View{
    @StateObject private var urlImageModel: UrlImageModel
    
    init(urlString: String? ){
        _urlImageModel = StateObject(wrappedValue: UrlImageModel(urlString: urlString))
    }
    
    var body: some View {
        Image(uiImage: urlImageModel.image ?? ProfilePicture.placeholderProfileImage!)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width:150, height: 150)
                .clipShape(Circle())
                .shadow(color: Color("LightWhite"), radius: 9, x: 0, y: 13)
                  
    }     
}

4. 可选：添加本地持久化缓存（解决APP重启后缓存丢失） #

如果需要APP重启后仍保留缓存，可将图片存储到本地文件系统：

import CryptoKit

class CacheImageManager {
    private let cacheDir: URL
    
    init() {
        // 获取应用缓存目录
        cacheDir = FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first!
    }
    
    func getCache(forKey: String) -> UIImage? {
        print("从缓存读取")
        // 将URL转为唯一MD5文件名
        let fileName = forKey.md5
        let fileURL = cacheDir.appendingPathComponent(fileName)
        guard let data = try? Data(contentsOf: fileURL) else {
            return nil
        }
        return UIImage(data: data)
    }
    
    func setCache(forKey: String, image: UIImage) {
        print("保存到缓存")
        let fileName = forKey.md5
        let fileURL = cacheDir.appendingPathComponent(fileName)
        // 将图片转为JPEG数据保存
        if let data = image.jpegData(compressionQuality: 0.8) {
            try? data.write(to: fileURL)
        }
    }
}

// 添加String的MD5扩展，生成唯一文件名
extension String {
    var md5: String {
        let data = Data(self.utf8)
        let hash = Insecure.MD5.hash(data: data)
        return hash.map { String(format: "%02hhx", $0) }.joined()
    }
}

验证步骤 #

1. 替换缓存实现后，首次加载图片时控制台会打印「保存到缓存」。
2. 退出视图再进入，控制台应打印「从缓存读取」「找到缓存」，占位图不再闪烁。
3. 若使用持久化缓存，重启APP后仍能直接读取缓存图片。

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