ios - 如何改进 UITableview 中的加载图像？

Question

当我在表格 View 中加载 imageview 时遇到问题。它加载如此缓慢。我在表格 View 中使用了很多部分。这是我的代码:

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 TrangChuTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellTrangchu" forIndexPath:indexPath];

theGame *thegameObj;
if([indexPath section] == 0){

    thegameObj = [theZingArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 1){

    thegameObj = [theBitArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 2){

    thegameObj = [theMobayArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 3){

    thegameObj = [theGateArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 4){

    thegameObj = [theVcoinArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 5){

    thegameObj = [theGarenaArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 6){

    thegameObj = [theOncashArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 7){

    thegameObj = [theMobiphoneArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 8){

    thegameObj = [theVinaphoneArray objectAtIndex:indexPath.row];

}else if([indexPath section] == 9){

    thegameObj = [theViettelArray objectAtIndex:indexPath.row];

}
NSURL *urlImage = [NSURL URLWithString:thegameObj.image];
NSData *imageData = [NSData dataWithContentsOfURL:urlImage];
cell.txtQuantity.text=@"1";
UIImage *image= [UIImage imageWithData:imageData];
cell.imageView.layer.cornerRadius=5;
cell.imageView.layer.masksToBounds=YES;
cell.imageView.image = image;
cell.labelName.text = thegameObj.objectName;

if([[AppDelegate appDelegate]checkIP])
{
    [cell.txtQuantity setBackgroundColor:[UIColor whiteColor]];
    [cell.txtQuantity.layer setBorderColor:[UIColor grayColor].CGColor];
    [cell.txtQuantity.layer setBorderWidth:1.0];
    [cell.txtQuantity.layer setCornerRadius:5];
    cell.labelPrice.text = [NSString stringWithFormat:@"%@ (%@)", [NSNumberFormatter localizedStringFromNumber:thegameObj.price numberStyle:NSNumberFormatterDecimalStyle], loadCurrency];

}
else
{
    [cell.lbdetail setTitle:@"detail" forState:UIControlStateNormal];
    cell.txtQuantity.hidden=YES;
    cell.labelPrice.hidden=YES;
    cell.lbgia.hidden=YES;
    cell.lbsl.hidden=YES;
    cell.lbdetail.hidden=YES;

}

cell.objArray = thegameObj;
cell.currency = loadCurrency;
/*
 [cell.addToCartButton addTarget:self action:@selector(addToCart:) forControlEvents:UIControlEventTouchUpInside];
 cell.addToCartButton.tag = [NSString stringWithFormat:@"%d_%d", (NSInteger)[indexPath section], (NSInteger)[indexPath row]];
 */
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;


return cell;
}

请帮助我改进在 UItableview 中使用大量部分更快地加载图像。感谢您提供任何解决方案!

Answer 1

一个有用的东西是匹配分段表模型的数据结构，它是数组的数组。你几乎就在那里，因为你有所有的子阵列。像这样构建一个(当构建所有子数组时，而不是在 cellForRow 中):

NSArray *model = @[ theZingArray, theBitArray, /*... and so on */];

这将使您将大条件变平为一行:

thegameObj = model[indexPath.section][indexPath.row];

你可以在别处使用它，比如在 numberRowsInSection

NSArray *sectionArray = model[indexPath.section];
return sectionArray.count;

稍微棘手的问题是让这些图像异步加载并缓存。讨论了一种完全原生的方法 here和许多others .

将这个想法应用到您的代码中，这里有一个方法可以返回缓存图像，或者获取、缓存并返回...

// declare this and BE SURE TO INITIALIZE IT
@property(strong,nonatomic) NSMutableDictionary *imageCache;

// return an image found at the url string, if one is cached return it, otherwise,
// fetch it, cache it and return it
- (void)imageAtURLString:(NSString *)urlString completion:(void(^)(UIImage *, BOOL))completion {
    if (self.imageCache[urlString]) {  // if it's cached
        completion(self.imageCache[urlString], YES);
    } else {  // fetch and cahce
        NSURL *url = [NSURL URLWithString:urlString];

        NSURLSessionTask *task = [[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
            if (data) {
                UIImage *image = [UIImage imageWithData:data];
                if (image) {
                    self.imageCache[urlString] = image;
                    dispatch_async(dispatch_get_main_queue(), ^{
                        completion(image, NO);
                    });
                }
            }
        }];
        [task resume];
    }
}

现在您的简化cellForRowAtIndexPath 看起来像这样:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid"];  // fixme

    theGame *thegameObj = model[indexPath.section][indexPath.row];
    NSString *urlString = thegameObj.image;
    UIImageView *imageView = cell.imageView;

    [self imageAtURLString:urlString completion:^(UIImage *image, BOOL wasCached) {
        if (wasCached) imageView.image = image;
        else [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
    }];

    return cell;
}

这里的想法是，您要么有一个缓存图像，在这种情况下，只需将单元格的 imageView 图像设置为该图像，要么您必须获取一个图像。在获取的情况下，不确定该行是否在获取期间被滚动了。重新加载当前行以使其使用(现在缓存的)图像进行更新。