How to load an image before it appears in SwiftUI?

[ir-fuel]

I'm using version 8.

I read that loadImmediately on FKImage is deprecated "because we use @StateObject", but TBH I don't understand this explanation.

I have the following code in SwiftUI

        GeometryReader { geometry in
                TabView {
                    ForEach(pictures, id:\.self) { url in
                        KFImage(url)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height)
                    }
                }
                .tabViewStyle(.page)
        }

When I start scrolling horizontally the next image is black for a short while, until it has been loaded and then it appears as it's supposed to.
I see no way of force-loading the KFImage's url so I don't have this black flash when scrolling to an image that's not in the cache already, at least not using FKImage

capture.mov

[TelOkan]

I think you can use placeholder modifier as skeleton animation or prefetch mechanism.

[TelOkan]

I added simple prefetch usage below and you can check link more detail.

 ImagePrefetcher(urls: urls) { skippedResources, failedResources, completedResources in
                    print("skippedResources: ", skippedResources)
                    print("failedResources: ", failedResources)
                    print("completedResources: ", completedResources)
                }.start()

[devahmedshendy]

What did you do to overcome this?

[MarkusConnelly]

It looks like the black flash you’re seeing happens because the images are not loaded into memory before they appear in the TabView. Using ImagePrefetcher like TelOkan suggested is a good solution. You can prefetch all URLs ahead of time so that when the user scrolls, the images are already cached and display instantly. Another option is to use a placeholder modifier with a blurred version or skeleton view so the transition feels smoother while the image loads.

[harrymagy]

You’re running into the common ‘image not preloaded’ problem in SwiftUI with KFImage. One approach is to manually prefetch the images before they appear in the TabView using KingfisherManager.shared.retrieveImage(with:). This way, the images are cached ahead of time, reducing or eliminating that black flash when scrolling.

For example, you could loop through your pictures array in onAppear and prefetch them asynchronously. That should help smooth out the TabView experience even if loadImmediately is deprecated.

[jeanvzanders5442-debug]

Got it fixed anyway? I think I am at the same bottleneck.

[sultanahmed21]

If you haven’t fixed it yet, try prefetching all image URLs before the TabView appears. Kingfisher’s ImagePrefetcher or KingfisherManager.shared.retrieveImage both work well. Once the cache is warm, the black flash disappears and scrolling becomes smooth. Just call the prefetch logic in onAppear and it should solve the issue.