iOS
Ladda bilder async

Enklaste sättet

Det enklaste sättet att skapa detta är att använda Alamofire och dess UIImageViewExtension . Vad vi behöver är en tabellvy med en cell som har en imageView i och låter imageView kalla den imageView .

I funktionen cellForRowAt: i tabellenView laddade vi ned bilden och ställdes på följande sätt:

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

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

URL-adressen ska peka på den bild du vill ladda ner och placeHolder-bilden ska vara en lagrad bild. Vi kallar af_setImage metoden af_setImage på imageView som laddar ner bilden på den angivna url och under nedladdningen visas platshållarbilden. Så snart bilden laddas ner visas den begärda bilden

Kontrollera att cellen fortfarande är synlig efter nedladdningen

Ibland tar nedladdningen längre tid än cellen visas. I det här fallet kan det hända att den nedladdade bilden visas i fel cell. För att fixa detta kan vi inte använda UIImageView-förlängningen .

Vi kommer fortfarande att använda Alamofire men vi kommer att använda färdigbehandlaren för att visa bilden.

I det här scenariot behöver vi fortfarande en tabellvisning med en cell som har en bildvisning i den. I metoden cellForRowAt: skulle vi ladda ner bilden med följande kod:

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

I det här exemplet ställer vi först in bilden till platshållarbilden. Efteråt vi hämta bilden med request metoden Alamofire . Vi passerar url som det första argumentet och eftersom vi bara vill få bilden kommer vi att använda .get HTTP-metoden. Eftersom vi laddar ner en bild vill vi att svaret ska vara en bild, därför använder .responseImage metoden .responseImage .

När bilden har laddats ner stängs avslutningen och vi ser först och främst till att den nedladdade bilden faktiskt finns. Då ser vi till att cellen fortfarande är synlig genom att kontrollera att cellForRow (på: indexPath) inte returnerar noll. Om det inte händer ingenting, om det inte tilldelar vi den nyligen nedladdade bilden.

Detta sista if-uttalande säkerställer att cellen fortfarande är synlig om användaren redan rullat över cellen kommer updateCell att vara noll och if-uttalandet returnerar noll. Detta hjälper oss att förhindra visning av fel bild i en cell.