Swift - AlamofireImage télécharger plusieurs URL et afficher dans CollectionView

Question

Je voudrais télécharger plusieurs URL à partir de la chaîne dans le tableau, et afficher les images dans collectionView. Je réussis à afficher quatre images (4 cellules visibles sur mon écran) et quand je défile, cela commence le téléchargement des 2 autres images.

Je veux que ces 6 images soient téléchargées en même temps (et je n'ai pas besoin de faire défiler pour commencer l'autre téléchargement). Après cela, je veux afficher le temps total passé pour télécharger et afficher des images dans mon collectionView.

Qu'est-ce que je fais mal?

Voici mon code:

import UIKit 
import AlamofireImage 
import Alamofire 

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource { 

    var players = [ 
     ["image_Name":"https://images.unsplash.com/photo-1420768255295-e871cbf6eb81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=4b94ef340bd7f6cac580fbc76af326af"], 
     ["image_Name":"https://images.unsplash.com/photo-1465411801898-f1a78de00afc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=149d27223217c0fa63c7dd8f1e8d23f6"], 
     ["image_Name":"https://images.unsplash.com/photo-1466853817435-05b43fe45b39?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a3b629b7e0c4f710ce119f219ae5b874"], 
     ["image_Name":"https://images.unsplash.com/photo-1467404899198-ccadbcd96b91?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=66eef8db7a0aa4119c6c8d7ba211f79f"], 
     ["image_Name":"https://images.unsplash.com/photo-1470322346096-ecab3914cab7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=83863ba23662871baf6434c6000e00bd"], 
     ["image_Name":"https://images.unsplash.com/photo-1473624566182-509e437512f4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=54c3ec6d1fee824d62e6fa76676ddf17"] 
    ] 
    var methodStart = Date() 

    @IBOutlet weak var mycall: UICollectionView! 
    var selectedIndex=[Int]() 

    override func viewDidLoad() { 
     super.viewDidLoad() 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
    } 


    func numberOfSections(in collectionView: UICollectionView) -> Int { 
     return 1 
    } 

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return self.players.count 
    } 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
     let cell:playerCell = collectionView.dequeueReusableCell(withReuseIdentifier: "playerCell", for: indexPath) as! playerCell 

     let url = URL(string:self.players[indexPath.row]["image_Name"]!) 
     if indexPath.row == 0 { 
      methodStart = Date() 
     } 
     Alamofire.request(url!).responseImage { response in 
      //   debugPrint(response) 
      //   print(response.request) 
      //   print(response.response) 
      //   debugPrint(response.result) 

      if let image = response.result.value { 
       cell.playerImage.image = image 
      } 
     } 

     if indexPath.row == self.players.count - 1 { 
      let methodFinish = NSDate() 
      let executionTime = methodFinish.timeIntervalSince(methodStart as Date) 
      print("Execution time: \(executionTime)") 
     } 

     return cell 
    } 
} 

Answer 1

problème dans votre code -

vous avez dit que vous voulez que ces 6 images à télécharger en même temps et lorsque l'utilisateur fait défiler les 5 et 6 images devrait s'afficher immédiatement. mais cela ne se produit pas parce que la fonction cellForItemAtIndexPath pour la 5e et 6e cellule appelée lorsque vous faites défiler. C'est le comportement par défaut et vous ne pouvez pas l'invoquer avant que l'utilisateur n'ait défilé.

solution rapide -

Télécharger toutes les images en dehors de la fonction cellForItemAtIndexPath, comme dans les deux viewDidLoad ou viewDidAppear en bouclant le tableau des joueurs puis recharger la vue collection après la fin de téléchargement du dernier.

permanent et la meilleure solution -

Mettre en œuvre le chargement paresseux et la mise en cache des images à l'aide soit Heneke ou SDWebImage pour afficher l'image dans les cellules. Et utilisez l'option prefetch dans ces bibliothèques pour récupérer les images avant qu'elles n'apparaissent dans les cellules. Pour utiliser l'option prefetch, vous devez parcourir le tableau et passer les urls aux fonctions de récupération et de stockage de la bibliothèque et charger l'image dans la cellule en fonction de la syntaxe de cette bibliothèque et gérer l'affichage de l'image lors de son téléchargement. ne pas avoir à s'inquiéter à ce sujet.

Answer 2

Lorsque vous traitez des appels réseau, vous devez mettre à jour l'interface utilisateur dans la file d'attente principale. Un autre point valide que je veux ajouter ici est Alamofire a une bibliothèque spéciale pour le téléchargement d'image/redimensionner. S'il vous plaît jeter un oeil à AlamofireImage Library

Alamofire.request(url!).responseImage { response in 
      if let image = response.result.value { 
       DispatchQueue.main.async { 
        cell.playerImage.image = image 
        cell.playerImage.setNeedsLayout() 
       } 
      } 
     }