iOS
Bilder asynchron laden
Suche…
Einfachster Weg
Am einfachsten erstellen Sie dies, indem Sie Alamofire und seine UIImageViewExtension verwenden . Was wir brauchen, ist eine TableView mit einer Zelle, in der sich imageView befindet, und diese imageView
nennen kann.
In der Funktion cellForRowAt: des tableView würden wir das Bild herunterladen und folgendermaßen einstellen:
let url = URL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!
imageView.af_setImage(withURL: url, placeholderImage: placeholderImage)
Die URL sollte auf das Bild zeigen, das Sie herunterladen möchten, und das placeHolder-Bild sollte ein gespeichertes Bild sein. Wir rufen dann die af_setImage
Methode in imageView
die das Bild unter der angegebenen URL herunterlädt, und während des Downloads wird das Platzhalterbild angezeigt. Sobald das Bild heruntergeladen ist, wird das angeforderte Bild angezeigt
Überprüfen Sie, ob die Zelle nach dem Download noch sichtbar ist
Manchmal dauert der Download länger als die Zelle angezeigt wird. In diesem Fall kann es vorkommen, dass das heruntergeladene Bild in der falschen Zelle angezeigt wird. Um dies zu beheben, können wir die UIImageView-Erweiterung nicht verwenden.
Wir werden immer noch Alamofire verwenden, aber wir werden den Fertigstellungs-Handler verwenden, um das Bild anzuzeigen.
In diesem Szenario benötigen wir noch eine tableView mit einer Zelle, die eine imageView enthält. In der cellForRowAt: -Methode würden wir das Bild mit dem folgenden Code herunterladen:
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 diesem Beispiel setzen wir das Bild zunächst auf das Platzhalterbild. Anschließend laden wir das Bild mit der request
von Alamofire herunter . Wir übergeben die URL als erstes Argument und da wir nur das Image erhalten wollen, verwenden wir die HTTP-Methode .get
. Da wir ein Bild herunterladen, möchten wir, dass die Antwort ein Bild ist. Daher verwenden wir die .responseImage
Methode.
Nachdem das Bild heruntergeladen wurde, wird die Schließung aufgerufen. Zunächst stellen wir sicher, dass das heruntergeladene Bild tatsächlich vorhanden ist. Dann stellen wir sicher, dass die Zelle noch sichtbar ist, indem wir überprüfen, dass cellForRow (at: indexPath) nicht null zurückgibt. Wenn dies nicht der Fall ist, wird das zuletzt heruntergeladene Bild zugewiesen.
Diese letzte if-Anweisung stellt sicher, dass die Zelle noch sichtbar ist, wenn der Benutzer bereits über die Zelle gescrollt wurde. Die updateCell-Instanz ist null und die if-Anweisung gibt null zurück. Dies hilft uns zu verhindern, dass das falsche Bild in einer Zelle angezeigt wird.