SwiftUI LazyVGrid(MacOS) and AsyncImage loads again when scrolling away and back [duplicate] - swift

Question

I'm new to SwiftUI and was looking how to download images from a URL. I've found out that in iOS15 you can use AsyncImage to handle all the phases of an Image. The code looks like this.
AsyncImage(url: URL(string: urlString)) { phase in
switch phase {
case .success(let image):
image
.someModifers
case .empty:
Image(systemName: "Placeholder Image")
.someModifers
case .failure(_):
Image(systemName: "Error Image")
.someModifers
#unknown default:
Image(systemName: "Placeholder Image")
.someModifers
}
}
I would launch my app and every time I would scroll up & down on my List, it would download the images again. So how would I be able to add a cache. I was trying to add a cache the way I did in Swift. Something like this.
struct DummyStruct {
var imageCache = NSCache<NSString, UIImage>()
func downloadImageFromURLString(_ urlString: String) {
guard let url = URL(string: urlString) else { return }
URLSession.shared.dataTask(with: url) { data, response, error in
if let _ = error {
fatalError()
}
guard let data = data, let image = UIImage(data: data) else { return }
imageCache.setObject(image, forKey: NSString(string: urlString))
}
.resume()
}
}
But it didn't go to good. So I was wondering is there a way to add caching to AsyncImage? Thanks would appreciate any help.

Answer 1

I had the same problem as you. I solved it by writing a CachedAsyncImage that kept the same API as AsyncImage, so that they could be interchanged easily, also in view of future native cache support in AsyncImage.
I made a Swift Package to share it.
CachedAsyncImage has the exact same API and behavior as AsyncImage, so you just have to change this:
AsyncImage(url: logoURL)
to this:
CachedAsyncImage(url: logoURL)
In addition to AsyncImage initializers, you have the possibilities to specify the cache you want to use (by default URLCache.shared is used):
CachedAsyncImage(url: logoURL, urlCache: .imageCache)
// URLCache+imageCache.swift
extension URLCache {
static let imageCache = URLCache(memoryCapacity: 512*1000*1000, diskCapacity: 10*1000*1000*1000)
}
Remember when setting the cache the response (in this case our image) must be no larger than about 5% of the disk cache (See this discussion).
Here is the repo.

Answer 2

Hope this can help others.
I found this great video which talks about using the code below to build a async image cache function for your own use.
import SwiftUI
struct CacheAsyncImage<Content>: View where Content: View{
private let url: URL
private let scale: CGFloat
private let transaction: Transaction
private let content: (AsyncImagePhase) -> Content
init(
url: URL,
scale: CGFloat = 1.0,
transaction: Transaction = Transaction(),
#ViewBuilder content: #escaping (AsyncImagePhase) -> Content
){
self.url = url
self.scale = scale
self.transaction = transaction
self.content = content
}
var body: some View{
if let cached = ImageCache[url]{
let _ = print("cached: \(url.absoluteString)")
content(.success(cached))
}else{
let _ = print("request: \(url.absoluteString)")
AsyncImage(
url: url,
scale: scale,
transaction: transaction
){phase in
cacheAndRender(phase: phase)
}
}
}
func cacheAndRender(phase: AsyncImagePhase) -> some View{
if case .success (let image) = phase {
ImageCache[url] = image
}
return content(phase)
}
}
fileprivate class ImageCache{
static private var cache: [URL: Image] = [:]
static subscript(url: URL) -> Image?{
get{
ImageCache.cache[url]
}
set{
ImageCache.cache[url] = newValue
}
}
}

Answer 3

AsyncImage uses default URLCache under the hood. The simplest way to manage the cache is to change the properties of the default URLCache
URLCache.shared.memoryCapacity = 50_000_000 // ~50 MB memory space
URLCache.shared.diskCapacity = 1_000_000_000 // ~1GB disk cache space

Answer 4

User like this
ImageView(url: URL(string: "https://wallpaperset.com/w/full/d/2/b/115638.jpg"))
.frame(width: 300, height: 300)
.cornerRadius(20)
ImageView(url: URL(string: "https://ba")) {
// Placeholder
Text("⚠️")
.font(.system(size: 120))
}
.frame(width: 300, height: 300)
.cornerRadius(20)
ImageView.swift
import SwiftUI
struct ImageView<Placeholder>: View where Placeholder: View {
// MARK: - Value
// MARK: Private
#State private var image: Image? = nil
#State private var task: Task<(), Never>? = nil
#State private var isProgressing = false
private let url: URL?
private let placeholder: () -> Placeholder?
// MARK: - Initializer
init(url: URL?, #ViewBuilder placeholder: #escaping () -> Placeholder) {
self.url = url
self.placeholder = placeholder
}
init(url: URL?) where Placeholder == Color {
self.init(url: url, placeholder: { Color("neutral9") })
}
// MARK: - View
// MARK: Public
var body: some View {
GeometryReader { proxy in
ZStack {
placholderView
imageView
progressView
}
.frame(width: proxy.size.width, height: proxy.size.height)
.task {
task?.cancel()
task = Task.detached(priority: .background) {
await MainActor.run { isProgressing = true }
do {
let image = try await ImageManager.shared.download(url: url)
await MainActor.run {
isProgressing = false
self.image = image
}
} catch {
await MainActor.run { isProgressing = false }
}
}
}
.onDisappear {
task?.cancel()
}
}
}
// MARK: Private
#ViewBuilder
private var imageView: some View {
if let image = image {
image
.resizable()
.scaledToFill()
}
}
#ViewBuilder
private var placholderView: some View {
if !isProgressing, image == nil {
placeholder()
}
}
#ViewBuilder
private var progressView: some View {
if isProgressing {
ProgressView()
.progressViewStyle(.circular)
}
}
}
#if DEBUG
struct ImageView_Previews: PreviewProvider {
static var previews: some View {
let view = VStack {
ImageView(url: URL(string: "https://wallpaperset.com/w/full/d/2/b/115638.jpg"))
.frame(width: 300, height: 300)
.cornerRadius(20)
ImageView(url: URL(string: "https://wallpaperset.com/w/full/d/2/b/115638")) {
Text("⚠️")
.font(.system(size: 120))
}
.frame(width: 300, height: 300)
.cornerRadius(20)
}
view
.previewDevice("iPhone 11 Pro")
.preferredColorScheme(.light)
}
}
#endif
ImageManager.swift
import SwiftUI
import Combine
import Photos
final class ImageManager {
// MARK: - Singleton
static let shared = ImageManager()
// MARK: - Value
// MARK: Private
private lazy var imageCache = NSCache<NSString, UIImage>()
private var loadTasks = [PHAsset: PHImageRequestID]()
private let queue = DispatchQueue(label: "ImageDataManagerQueue")
private lazy var imageManager: PHCachingImageManager = {
let imageManager = PHCachingImageManager()
imageManager.allowsCachingHighQualityImages = true
return imageManager
}()
private lazy var downloadSession: URLSession = {
let configuration = URLSessionConfiguration.default
configuration.httpMaximumConnectionsPerHost = 90
configuration.timeoutIntervalForRequest = 90
configuration.timeoutIntervalForResource = 90
return URLSession(configuration: configuration)
}()
// MARK: - Initializer
private init() {}
// MARK: - Function
// MARK: Public
func download(url: URL?) async throws -> Image {
guard let url = url else { throw URLError(.badURL) }
if let cachedImage = imageCache.object(forKey: url.absoluteString as NSString) {
return Image(uiImage: cachedImage)
}
let data = (try await downloadSession.data(from: url)).0
guard let image = UIImage(data: data) else { throw URLError(.badServerResponse) }
queue.async { self.imageCache.setObject(image, forKey: url.absoluteString as NSString) }
return Image(uiImage: image)
}
}

Answer 5

Maybe later to the party, but I came up to this exact problem regarding poor performances of AsyncImage when used in conjunction with ScrollView / LazyVStack layouts.
According to this thread, seams that the problem is in someway due to Apple's current implementation and sometime in the future it will be solved.
I think that the most future-proof approach we can use is something similar to the response from Ryan Fung but, unfortunately, it uses an old syntax and miss the overloaded init (with and without placeholder).
I extended the solution, covering the missing cases on this GitHub's Gist. You can use it like current AsyncImage implementation, so that when it will support cache consistently you can swap it out.