ios - UICollection View 异步图像加载+重新加载

Question

我遇到以下问题:

我有一个带有 UICollection View 的 View Controller ，文本数据(名称、图像的 url)来自使用 swiftyJSON 的 json，但所有图像都是以这种方式异步下载的:

`func loadImageForCell(url: String, imageView: UIImageView){

    let downloadQueue = dispatch_queue_create("io.test.downloadimage", nil)

    dispatch_async(downloadQueue){

        var data = NSData(contentsOfURL: NSURL(string: url)!)

        var image: UIImage?

        if (data != nil){

            image = UIImage(data: data!)!

        }



        dispatch_async(dispatch_get_main_queue()){

            imageView.image = image


        }


    }


}

`

我也有这样的要求，通过在选择器中选择一个值，必须发送另一个json请求，并且 Collection View 应该根据接收到的信息进行更新(重新加载)。

当我添加 collectionView.reloadData() 时，它适用于文本数据，但图像正在混合。所有单元格都包含错误的图像。

当选择选择器中的项目时执行此函数:

func updateLabel(){



    var sizeComponent = PickerComponent.size.rawValue

    var chosenCategory = pickerData[sizeComponent][myPicker.selectedRowInComponent(sizeComponent)]
  [myPicker.selectedRowInComponent(toppingComponent)]
    CategoryLabel.setTitle(chosenCategory, forState: .Normal)

    ArrayOfDescSmall = []
    ArrayOfURLs = []

    let url = NSURL(string: "***")
    var request = NSURLRequest(URL: url!)
    var data = NSURLConnection.sendSynchronousRequest(request, returningResponse: nil, error: nil)

    var hoge = JSON(data: data!)

    let sampleJson = hoge.array

        if(sampleJson == nil){

            TotalNumber = 0

        } else{

    TotalNumber = sampleJson!.count   

        }

   for(var i = 0; i < TotalNumber; i++){

        ArrayOfDescSmall.append(hoge[i]["name"].string!)
        ArrayOfURLs.append(hoge[i]["imageUrl"].string!)
    }

        CollectionView.setContentOffset(CGPoint(x: 0, y: -60), animated:true)
    }



}

如何解决？

提前致谢!

Answer 1

您的单元格显示错误图像的原因是因为单元格在 Collection View 中被重用，并且看起来您在重用单元格时没有取消数据请求。不过修复起来很容易。将两个属性添加到您的自定义单元类:

@property(strong, nonatomic) NSURSessionDataTask *imageDataTask;
@property(strong, nonatomic) NSURL *imageUrl;

为 URL 添加自定义 setter ，如下所示:

- (void)setImageUrl:(NSURL *)imageUrl {
  _imageUrl = imageUrl;
  self.imageDataTask = 'new nsurlsessiondatatask for your image, 
        with a completion handler where you convert data into an image, 
        and set image to the imageView on the main thread'
  [self.imageDataTask resume];
}

实现“prepareForReuse”方法，并在那里取消数据任务，如下所示:

- (void)prepareForReuse {
  [super prepareForReuse];
  [self.imageDataTask cancel];
}

现在，当您在单元格中设置新的 imageUrl 时，它会自动开始下载，然后在下载完成时显示图像。