TabView et AsyncImage

iOS Aller plus loin
1

Hello tout le monde,

Je viens d’installer un slider d’image avec une TabView mais j’ai des problèmes de chargements mes images. Ca marche niquel pour des images du asset catalogue mais avec des images téléchargées via un webservice, ca pose problème.

Admettons qu’on a trois images, la première charge et s’affiche. J’obtiens trois petits points sous la photo :

image

Si je slide sur la droite, je passe à la deuxième image qui commence à charger et la tabView me ramène tout de suite sur la première image.
Si je recommence, l’image étant déjà pré-chargée, la tabView reste bien sur la deuxième image.

Comment éviter ce comportement ? Est-ce qu’il faut que je charge en avance les autres images au moment de l’affichage de la première ?

Voici mon code :

if !viewModel.fungus.posterPath.isEmpty {
                        TabView {
                            ForEach (viewModel.fungus.posterPath) { posterPath in
                                AsyncImage(url: URL(string: posterPath.path),transaction: .init(animation: .spring())) { phase in
                                    switch phase {
                                    case .empty:
                                        ProgressView()
                                    case .success(let image):
                                        image.resizable().scaledToFill()
                                    case .failure:
                                        Text("Impossible de charger l'image. Vérifier votre connection internet")
                                            .foregroundColor(.red)
                                    @unknown default:
                                        Text("Erreur inconnue")
                                            .foregroundColor(.red)
                                    }
                                }
                                .frame(height: 220)
                                .clipShape(RoundedRectangle(cornerRadius: 10))
                                .padding(.horizontal, 10.0)
                                .padding(.bottom, 5.0)
                            }
                        }
                        .tabViewStyle(PageTabViewStyle())
                        .frame(height: 230)
                    }

Merci d’avance pour votre aide !!

2

Est-ce qu’un placeholder ne corrigerait pas le problème ?
Si tu as une image d’attente au moins ton TabView pourra afficher quelque chose en attendant

3

Bonne idée !! Je vais tenter ça :slight_smile:

4

Bon ben, ca règle pas le problème …
Lorsque je slide relativement lentement, je n’ai pas le problème mais si je clique sur les points alors je reviens à l’image précédente.

5

Hello,

Avant de coder le chargement des images en locale dans mon ViewModel comme évoqué dans le coatching, j’ai tenté quelque chose sur ma view et j’ai réussi à contourner le problème.

J’ai encapsulé mon AsyncImage dans une ZStack e je voulais la duppliquer pour tenter de la charger en amont. Et bizarrement, ca permet de contourner le problème …

Je vous mets le code ici. C’est pas très propre mais ca marche … :slight_smile:

TabView {
                            ForEach (viewModel.fungus.posterPath) { posterPath in
                                ZStack {
                                    AsyncImage(url: URL(string: posterPath.path),transaction: .init(animation: .spring())) { phase in
                                        switch phase {
                                        case .empty:
                                            ProgressView()
                                        case .success(let image):
                                            image.resizable().scaledToFill()
                                        case .failure:
                                            Text("Impossible de charger l'image. Vérifier votre connection internet")
                                                .foregroundColor(.red)
                                        @unknown default:
                                            Text("Erreur inconnue")
                                                .foregroundColor(.red)
                                        }//switch
                                    }//AsyncImage
                                    .frame(height: 220)
                                    .clipShape(RoundedRectangle(cornerRadius: 10))
                                    .padding(.horizontal, 10.0)
                                    .padding(.bottom, 5.0)
                                    
                                    //Permet de contourner le problème des images suivantes avec le retour à la position 1
                                    AsyncImage(url: URL(string: posterPath.path)) { image in
                                        image.resizable().scaledToFill()
                                    } placeholder: {
                                        ProgressView()
                                    }//AsyncImage
                                    .frame(height: 220)
                                }//ZStack
                            }//ForEach
                        }//TabView
                        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
                        .frame(height: 230)
1 « J'aime »
6

Bonne idée, comme ça la ZStack est présente et prends la place quoi qu’il arrive, ce qui permet à ton TabView d’avoir un contenu stable :+1:

1 « J'aime »