从服务器下载图像以显示在 CollectionView 上

Question

我正在开发一个用户可以出售/购买的产品应用程序。此应用程序基于集合视图。集合视图具有集合单元格，其中显示产品图像缩略图。

以下代码从服务器获取产品图像，并等待下载所有图像，然后将它们显示在单元格中。以下代码有效，但用户等待 10-20 秒才能查看所有产品。有没有更好的处理方式？

- (void)viewDidLoad {
     [super viewDidLoad];
     dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
     dispatch_async(queue, ^(void) {
        [self loadFromURL];
     dispatch_async(dispatch_get_main_queue(), ^{
     });
  });
}

-(void)loadFromURL {
    NSURL *url = [NSURL URLWithString:@"http://myURL/productAll.php"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    AFHTTPRequestOperation *operation = [[AFHTTPRequestOperation alloc] initWithRequest:request];
    operation.responseSerializer = [AFJSONResponseSerializer serializer];

   [operation setCompletionBlockWithSuccess:^(AFHTTPRequestOperation *operation, id responseObject) 
     {        
      pElements= (NSMutableArray *)responseObject;
      [collectionView reloadData];

     } 
     failure:^(AFHTTPRequestOperation *operation, NSError *error) 
     {        
       UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Error Retrieving Product" message:[error localizedDescription]delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];
     [alertView show];
   }];    
  [operation start];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return pElements.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ProductCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    cell.backgroundColor=[UIColor whiteColor];
    NSString *arrayResult = [[pElements objectAtIndex:indexPath.row] objectForKey:@"image"];
    NSData *data = [[NSData alloc] initWithBase64EncodedString:arrayResult options:NSDataBase64DecodingIgnoreUnknownCharacters];
    cell.productImage.image = [[UIImage alloc] initWithData:data];
    cell.productImage.layer.cornerRadius = 10;
    cell.productImage.clipsToBounds = YES;
    return cell;
}

Answer 1

您有来自服务器的响应，其中所有图像的图像数据都在响应中以 base-64 编码。这意味着响应可能非常大，并且在下载所有内容之前不会显示给用户。

相反，您可以考虑重构您的服务器代码，使其不包含 base-64 格式的图像数据，而是仅包含一个 URL（或某些标识符），以便以后检索图像。您的响应应该小得多，并且应该能够更快地得到处理。

然后，当调用cellForItemAtIndexPath 时，您不会从原始响应中提取图像数据，而是懒惰地（并且异步地）请求单元格的图像。 AFNetworking 在UIImageView+AFNetworking 中提供了一个不错的UIImageView 类别，可以从网络源中异步检索图像。 （在进行异步图像检索时，使用这个类别可以让您摆脱许多微妙的问题。）

顺便说一下，如果您的图片大小不一，您可能希望在原始请求中包含图片的尺寸，以便可以预先调整单元格及其图片视图的大小，而不是将它们的大小调整为检索图像。

--

几个观察：

1. 您不需要将[self loadFromURL] 分派到后台队列，因为这已经是异步的。我可能会使用请求的GET

2. 您不能只将responseObject 转换为NSMutableArray，因为它可能是不可变的。如果你真的需要它是可变的，你真的应该使用NSArray或使用mutableCopy。

3. 您正在cellForItemAtIndexPath 中进行一些单元配置。大部分（剪辑、背景颜色等）都可以在 IB 中完成，所以我会在那里完成，而不是通过编程方式完成。您可能需要以编程方式做的唯一事情是圆角（即使这样，我也可能会使用 IBDesignable 子类，尽管这超出了这个问题的范围）。

因此，假设 (a) 您的数组有一个名为 imageURL 的新属性，它是图像的 URL； (b) 单元格具有固定大小的图像视图，您可以执行以下操作：

@interface ViewController ()

@property (nonatomic, strong) AFHTTPRequestOperationManager *manager;
@property (nonatomic, strong) NSArray *pElements;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.manager = [AFHTTPRequestOperationManager manager];

    [self loadFromURL];
}

-(void)loadFromURL {
    NSString *urlString = @"http://myURL/productAll.php";

    [self.manager GET:urlString parameters:nil success:^(AFHTTPRequestOperation * _Nonnull operation, id  _Nonnull responseObject) {
        self.pElements = responseObject;
        [self.collectionView reloadData];
    } failure:^(AFHTTPRequestOperation * _Nullable operation, NSError * _Nonnull error) {
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Error Retrieving Product" message:[error localizedDescription]delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];
        [alertView show];
    }];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.pElements.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    ProductCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    NSString *imageURL = self.pElements[indexPath.row][@"imageURL"];

    [cell.productImage setImageWithURL:[NSURL URLWithString:imageURL]];
    cell.productImage.layer.cornerRadius = 10;

    return cell;
}

@end