iOS
Laad afbeeldingen asynchroon

Makkelijkste weg

De meest eenvoudige manier om dit te maken is om Alamofire en zijn UIImageViewExtension te gebruiken . Wat we nodig hebben is een tabelweergave met een cel met een afbeeldingweergave erin en laat deze imageView noemen.

In de cellForRowAt: functie van de tabelweergave zouden we de afbeelding downloaden en op de volgende manier instellen:

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

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

De url moet verwijzen naar de afbeelding die u wilt downloaden en de placeHolder-afbeelding moet een opgeslagen afbeelding zijn. We roepen vervolgens de af_setImage methode op de imageView die de afbeelding downloadt met de opgegeven url en tijdens de download wordt de placeholder-afbeelding getoond. Zodra de afbeelding is gedownload, wordt de gevraagde afbeelding weergegeven

Controleer of de cel nog steeds zichtbaar is na het downloaden

Soms duurt het downloaden langer dan de cel wordt weergegeven. In dit geval kan het gebeuren dat de gedownloade afbeelding in de verkeerde cel wordt weergegeven. Om dit te verhelpen, kunnen we de UIImageView-extensie niet gebruiken.

We zullen nog steeds Alamofire gebruiken, maar we zullen de voltooiingshandler gebruiken om de afbeelding weer te geven.

In dit scenario hebben we nog steeds een tabelweergave nodig met een cel met een afbeeldingweergave erin. In de cellForRowAt: methode zouden we de afbeelding downloaden met de volgende code:

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
    }
}

In dit voorbeeld stellen we de afbeelding eerst in op de afbeelding voor de tijdelijke aanduiding. Daarna downloaden we de afbeelding met de request van Alamofire . We geven de URL door als het eerste argument en omdat we alleen de afbeelding willen krijgen, gebruiken we de HTTP-methode .get . Omdat we een afbeelding downloaden, willen we dat de reactie een afbeelding is en daarom gebruiken we de .responseImage methode.

Nadat de afbeelding is gedownload, wordt de afsluiting opgeroepen en zorgen we er eerst voor dat de gedownloade afbeelding daadwerkelijk bestaat. Vervolgens zorgen we ervoor dat de cel nog steeds zichtbaar is door te controleren of de cellForRow (at: indexPath) geen nul retourneert. Gebeurt dit niet, dan wijzen we de recent gedownloade afbeelding toe.

Deze laatste if-instructie zorgt ervoor dat de cel nog steeds zichtbaar is als de gebruiker al over de cel scrolde, de updateCell nul is en de if-instructie nul retourneert. Dit helpt ons voorkomen dat de verkeerde afbeelding in een cel wordt weergegeven.