iOS中如何在下载实际图片前显示预览图？参考WhatsApp实现

嘿，这个需求我刚好在项目里落地过，WhatsApp这套「先出预览图再加载高清图」的逻辑，核心就是**「分层加载+智能缓存」**，我把具体实现的关键点拆解给你：

1. 先搞定后端配合（最核心的前提） #

首先得让后端给每张原图生成对应的小尺寸预览图——WhatsApp的预览图一般是几十KB的低分辨率图（比如200x200左右），能做到秒级下载。

• 要求后端接口返回两个字段：previewImageUrl（预览图地址）和originalImageUrl（原图地址）
• 预览图优先用WebP格式，比传统JPG/PNG省50%左右流量，iOS 14+原生支持，低版本可以用SDWebImage/Kingfisher这类库做兼容

2. iOS客户端的加载流程 #

第一步：优先渲染预览图 #

用成熟的图片加载库（比如Kingfisher、SDWebImage）来处理异步加载，它们自带缓存和线程管理，不用自己写复杂的网络请求：

// Kingfisher示例：先加载预览图
imageView.kf.setImage(
    with: URL(string: previewImageUrl),
    placeholder: UIImage(named: "default_placeholder") // 加载时的占位图
)

第二步：后台静默加载原图 #

预览图显示后，再异步请求原图。这里要注意网络状态判断——WhatsApp会在蜂窝网络下默认不加载原图，让用户手动触发，避免消耗流量：

// 检查网络状态，WiFi下自动加载原图
if NetworkManager.shared.isConnectedToWiFi {
    imageView.kf.setImage(
        with: URL(string: originalImageUrl),
        placeholder: imageView.image, // 用已显示的预览图做占位
        options: [.transition(.fade(0.3))] // 淡入过渡，体验更丝滑
    )
} else {
    // 显示「点击加载高清图」的按钮，让用户主动触发
    let loadButton = UIButton(type: .system)
    loadButton.setTitle("加载高清图", for: .normal)
    loadButton.addTarget(self, action: #selector(loadOriginalImage), for: .touchUpInside)
    imageView.addSubview(loadButton)
    // 按钮布局省略...
}

3. 贴近WhatsApp的体验优化 #

• 智能缓存：预览图永久缓存（除非用户手动清理），原图可以设置7天过期，或者根据设备剩余存储自动清理
• 渐进式加载：如果后端支持，让原图采用渐进式JPG格式，这样下载过程中会从模糊到清晰逐步显示，替代预览图的过渡会更自然
• 状态提示：预览图加载时显示灰色占位或加载动画，原图加载时在角落加个小的「加载中」图标，让用户知道进度
• 内存优化：依赖图片加载库的自动内存管理，不用手动持有预览图的内存引用，避免OOM

4. 特殊场景处理 #

• 如果后端没提供预览图，不建议客户端下载原图后再生成缩略图——这完全违背了「快速显示预览」的初衷，一定要推动后端配合生成
• 对于长图/大图，预览图建议做中心裁剪（保持比例），避免拉伸变形，WhatsApp的预览图就是这么处理的

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