Verwenden von Alamofire zum Laden von Bildern mit URLs von JSON

Question

Ich erstelle eine Tabellenansicht mit Remotedaten für eine iOS-App. Ich verwende AlamoFire und SwiftyJSON, um eine JSON-Datei mit einer Reihe von Episoden zu laden.

Die JSON-Datei ist wie folgt aufgebaut:

{ 
    "id": "456", 
    "name": "EpOne", 
    "description": "Episode description 1", 
    "imageURL": "http://myimage.com/myimagefile1.jpg" 
}, 
{ 
    "id": "789", 
    "name": "Eptwo", 
    "description": "Episode description 2", 
    "imageURL": "http://myimage.com/myimagefile2.jpg" 
} ... 

So nenne ich

getEpisodes(url: endpoint) 

von ViewDidLoad. Dies läuft wie folgt vor:

func getEpisodes(url: String) { 
    Alamofire.request(url, method: .get).validate().responseJSON { response in 
     switch response.result { 
     case .success(let value): 
      let json = JSON(value) 
      self.buildEpisodeArray(json: json) 

     case .failure(let error): 
      print(error) 
     } 
    } 
} 

func buildEpisodeArray(json: JSON) { 
    if let allEpisodes = json["episodes"].array { 
     for singleEpisode in allEpisodes { 
      let currentEpisode = Episode() 
      currentEpisode.name = singleEpisode["name"].string! 
      currentEpisode.imageURL = singleEpisode["imageURL"].string! 
      episodes.append(currentEpisode) 
     } 
    } 
    tableView.reloadData() 
} 

Dann habe ich die Daten in meine Zellen laden

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    let cellIdentifier = "Cell" 
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! EpisodeCell 
    cell.nameLabel.text = episodes[indexPath.row].name 

    // TODO Get the image 

    return cell 
} 

An dieser Stelle alles funktioniert. Das Problem ist, wenn ich versuche, die Bilder zu laden. Ich habe ein paar Tutorials überprüft (ich bin neu hier) und nachdem ich die Daten mit Alamofire bekommen habe, benutzen sie contentsOf: url, um die Bilder zu bekommen. Also in meinem Fall würde ich ersetzen „// TODO das Bild Get“ mit

// Get the image 
    if let url = NSURL(string: episodes[indexPath.row].imageURL), 
     let data = NSData(contentsOf: url as URL) { 
     cell.episodeImage.image = UIImage(data: data as Data) 
    } 

Das die Bilder lädt aber die Tabellenansicht ist mega langsam. Aber, nicht mit contentsOf: URL gehen gegen die Vorteile des Ladens der Daten mit AlamoFire (ich glaube, das ist der Grund, warum die Tabelle ist so langsam, wenn ich scrollen rauf und runter)?

Sollte ich die Bilder nicht asynchron laden? Und wenn ja, mache ich eine separate Alamofire.request für jedes Bild?

Ich habe Tutorials gefunden, um Daten mit Alamofire zu laden, und andere, um Bilder zu laden (aber sonst nichts), aber was ist, wenn ich Daten laden und auch Bilder laden will, um mit diesen Daten zu gehen?

Vielen Dank für Ihre Hilfe.

Answer 1

Ich würde Ihnen empfehlen SDWebImage zu verwenden, es ist auch für Bildcachierens aus der Box: https://github.com/rs/SDWebImage

Es ist sehr einfach, es zu benutzen grundsätzlich:

import SDWebImage 

// Get the image 
cell.episodeImage.sd_setImage(with: URL(string: episodes[indexPath.row].imageURL))