iOS
Charger des images asynchrones

Manière la plus simple

La manière la plus simple de créer ceci est d'utiliser Alamofire et son UIImageViewExtension . Ce dont nous avons besoin, c'est d'une tableview avec une cellule qui contient une imageView et permet de l'appeler imageView .

Dans la fonction cellForRowAt: de la table, nous téléchargerions l'image et la définirions de la manière suivante:

let url = URL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!

imageView.af_setImage(withURL: url, placeholderImage: placeholderImage)

L'URL doit pointer sur l'image que vous souhaitez télécharger et l'image placeHolder doit être une image stockée. Nous appelons ensuite la méthode af_setImage sur l' imageView qui télécharge l'image à l'URL donnée et, pendant le téléchargement, l'image de l'espace réservé sera affichée. Dès que l'image est téléchargée, l'image demandée est affichée

Vérifiez que la cellule est toujours visible après le téléchargement

Parfois, le téléchargement prend plus de temps que l'affichage de la cellule. Dans ce cas, il peut arriver que l'image téléchargée soit affichée dans la mauvaise cellule. Pour résoudre ce problème, nous ne pouvons pas utiliser l' extension UIImageView .

Nous utiliserons toujours Alamofire, mais nous utiliserons le gestionnaire d'achèvement pour afficher l'image.

Dans ce scénario, nous avons toujours besoin d'une tableView avec une cellule contenant une imageView. Dans la méthode cellForRowAt: nous téléchargerions l'image avec le code suivant:

let placeholderImage = UIImage(named: "placeholder")!
imageView.image = placeholderImage

let url = URL(string: "https://httpbin.org/image/png")!

Alamofire.request(url!, method: .get).responseImage { response in
    guard let image = response.result.value else { return }

    if let updateCell = tableView.cellForRow(at: indexPath) {
        updateCell.imageView.image = image
    }
}

Dans cet exemple, nous définissons d'abord l'image sur l'image de l'espace réservé. Ensuite, nous téléchargeons l'image avec la méthode de request d' Alamofire . Nous passons l'URL comme premier argument et comme nous voulons juste obtenir l'image, nous utiliserons la méthode HTTP .get . Comme nous téléchargeons une image, nous voulons que la réponse soit une image. Nous utilisons donc la méthode .responseImage .

Une fois l'image téléchargée, la fermeture est appelée et tout d'abord, nous nous assurons que l'image téléchargée existe réellement. Ensuite, nous nous assurons que la cellule est toujours visible en vérifiant que le cellForRow (at: indexPath) ne retourne pas nil. Si cela ne se produit rien, si ce n'est pas le cas, nous attribuons l'image récemment téléchargée.

Cette dernière instruction if garantit que la cellule est toujours visible si l'utilisateur a déjà fait défiler la cellule pour que updateCell soit nulle et que l'instruction if renvoie nil. Cela nous aide à éviter d'afficher la mauvaise image dans une cellule.