Swift - AlamofireImage загружает несколько URL-адресов и отображается в CollectionView

Question

Я хотел бы загрузить несколько URL-адресов из строки в массиве и отобразить изображения в collectionView. Мне удалось отобразить четыре изображения (4 видимых ячейки на моем экране), и когда я прокручиваю, это начинает загрузку двух других изображений.

Я хочу, чтобы эти 6 изображений загружались в одно и то же время (и мне не нужно прокручивать для начала другой загрузки). После этого я хочу показать общее время, затраченное на загрузку и отображение изображений в моем collectionView.

Что я делаю неправильно?

Вот мой код:

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

Проблема в коде -

вы сказали, что вы хотите, чтобы эти 6 изображения должны быть загружены в то же время и когда пользователь прокручивает 5 и 6-го образа должен отображаться немедленно. но этого не происходит, потому что функция cellForItemAtIndexPath для 5-й и 6-й ячеек называется при прокрутке. это поведение по умолчанию, и вы не можете вызывать его перед прокруткой пользователя.

решение Быстрого решения -

Скачать все изображения за пределами cellForItemAtIndexPath функции, как и в любом viewDidLoad или viewDidAppear обернув массив игроков, а затем перезагрузить представление коллекции после завершения загрузки последнего.

Постоянные и лучшее решение -

Реализация отложенной загрузки и кэширование изображений с использованием либо Heneke или SDWebImage, чтобы отобразить изображение в клетках. И используйте опцию prefetch в этих библиотеках для извлечения изображений до того, как они будут показаны в ячейках. Чтобы использовать опцию предварительной выборки, вам необходимо пройти через массив и передать URL-адреса в функции извлечения и хранения библиотеки и просто загрузить изображение в ячейку в соответствии с синтаксисом этой библиотеки, и он будет управлять отображением изображения при его загрузке, а вы не нужно беспокоиться об этом.

Answer 2

Когда вы имеете дело с сетевыми вызовами, вы должны обновить интерфейс в главной очереди. Еще одна важная точка, которую я хочу добавить здесь, - это Alamofire, имеющая специальную библиотеку для загрузки и изменения изображения. Пожалуйста, посмотрите на AlamofireImage Library

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