ios - 在 Swift 中加速 TableView 加载 JSON

Question

我目前正在开发一个 JSON TableView，其中包含来 self 的数据库的信息(一些带有图像及其名称的产品)。一切都很好，但向下(或向上)滚动时速度很慢。我对这个主题做了很多研究，但我已经尝试了他们的代码，但我仍然不知道如何将图像存储在缓存中以加速 TableView。

这是我的代码:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! BuscarCellTableViewCell

    if searchController.active {
        cell.nombre.text = searchResults[indexPath.row].nombre

        cell.marca.text = searchResults[indexPath.row].marca

        if let url = NSURL(string: searchResults[indexPath.row].imagen) {
            if let data = NSData(contentsOfURL: url) {
                cell.imagen.image = UIImage(data: data)
            }
        }
    }
    else {
        cell.nombre.text = productos[indexPath.row].nombre

        cell.marca.text = productos[indexPath.row].marca

        if let url = NSURL(string: productos[indexPath.row].imagen) {
            if let data = NSData(contentsOfURL: url) {
                cell.imagen.image = UIImage(data: data)
            }
        }
    }

    return cell
}

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

    // Define the initial state (Before the animation)
    cell.alpha = 0.25

    // Define the final state (After the animation)
    UIView.animateWithDuration(1.0, animations: { cell.alpha = 1 })
}

func getLatestLoans() {
    let request = NSURLRequest(URL: NSURL(string: LoadURL)!)
    let urlSession = NSURLSession.sharedSession()
    let task = urlSession.dataTaskWithRequest(request, completionHandler: { (data, response, error) -> Void in

        let res = response as! NSHTTPURLResponse!
        var err: NSError?

        if error != nil {
            println(error.localizedDescription)
        }

        // Parse JSON data
        self.productos = self.parseJsonData(data)

        // Reload table view
        dispatch_async(dispatch_get_main_queue(), {
            self.tableView.reloadData()
        })
    })

    task.resume()
}

func parseJsonData(data: NSData) -> [Producto] {
    var productos = [Producto]()
    var error:NSError?

    let jsonResult = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &error) as? NSDictionary

    // Return nil if there is any error
    if error != nil {
        println(error?.localizedDescription)
    }

    // Parse JSON data
    let jsonProductos = jsonResult?["lista_productos"] as! [AnyObject]
    for jsonProducto in jsonProductos {

        let producto = Producto()
        producto.nombre = jsonProducto["nombre"] as! String
        producto.imagen = jsonProducto["imagen"] as! String

        productos.append(producto)
    }

    return productos
}

如何在我的 JSON 文件中向下滚动“产品”时加快我的 TableView 的速度？

提前致谢

问候。

Answer 1

cellForRowAtIndexPath: 为每个新的/重复使用的单元格渲染调用。您不应在此方法中进行服务器调用。你应该这样做:

1. 填充数据对象“productos”后，调用一个新方法 fetchImages，它可以在后台触发 NSOperations 以获取图像。
2. 在获取图像时，您可以在每个单元格 ImageView 上显示加载叠加层。
3. 一旦图像响应返回，移除加载叠加层并刷新单元格。
4. 将图像缓存在文件系统中，以避免在用户在您的表格 View 中上下滚动时再次重新获取它们。

按照此操作，您应该会看到您的应用程序滚动行为得到了预期的改进。

编辑:根据 OP 请求:

第 1 步: 一旦从服务器加载模型数据，您就可以调用下面的 fetchImages 方法。如果您在本地加载数据，则在 loadView 中调用 fetchImages:

- (void)fetchImages {
    NSMutableArray *anImageURLsList = [NSMutableArray new]; // Assuming this contains your image URL list

    if ([anImageURLsList count] > 0) {
        __weak MyController *aBlockSelf = self;

        [[MyImageFetchController sharedImageFetchController] addURLs:anImageURLsList withDescription:[self description] andCompletionBlock:^(NSMutableArray *iFailedURLs) {
            dispatch_async(dispatch_get_main_queue(), ^{[UIApplication sharedApplication].networkActivityIndicatorVisible = NO; });

            if (aBlockSelf) {
                [[MyImageFetchController sharedImageFetchController].objectTokens seValue:[NSString stringWithFormat:@"%d", NO] forKey:[aBlockSelf description]];
                [aBlockSelf performSelectorOnMainThread:@selector(refresh) withObject:nil waitUntilDone:YES];
            }
        }];

        [[MyImageFetchController sharedImageFetchController].objectTokens setValue:[NSString stringWithFormat:@"%d", YES] forKey:[self description]];
        [MyImageFetchController sharedImageFetchController].delegate = self;
        [[MyImageFetchController sharedImageFetchController] startOperations];

    dispatch_async(dispatch_get_main_queue(), ^{[UIApplication sharedApplication].networkActivityIndicatorVisible = YES; });
    }
}


- (void)refresh {
    [self.tableView reloadData];
}

第 2 步: 现在让我们编写 NSOperation 子类来通过操作队列获取图像。下面的代码仅涵盖与此处讨论相关的重要方面。在这里，我为图像缓存实现提供了一个委托(delegate)回调。

- (void)addURLs:(NSMutableArray *)iURLs withDescription:(NSString *)iObjectDescription andCompletionBlock:(ImageFetchCompletionBlock)iImageFetchCompletionBlock {
    self.urls = iURLs;
    [self.objectTokens removeAllObjects];
    self.imageFetchCompletionBlock = iImageFetchCompletionBlock;
    self.objectDescription = iObjectDescription;

    if (self.failedURLs) {
        [self.failedURLs removeAllObjects];
    }
}


- (void)urlFailed:(NSString *)iFailedURL {
    @synchronized(self) {
        if (iFailedURL) {
            [self.failedURLs addObject:iFailedURL];
        }
    }
}


- (void)startOperations {
    MyImageFetchOperation *anImageFetchOperation = nil;
    NSMutableArray *anOperationList = [[NSMutableArray alloc] initWithCapacity:self.urls.count];
    self.queue = [NSOperationQueue new];

    for (NSString *aURL in [self.urls copy]) {
        anImageFetchOperation = [[MyImageFetchOperation alloc] initWithImageURL:aURL delegate:self];
        [anOperationList addObject:anImageFetchOperation];
    }

    [self.queue setMaxConcurrentOperationCount:3];
    [self.queue addOperations:anOperationList waitUntilFinished:NO];
}


- (void)operationCompletedForURL:(NSString *)iImageURL {
    @synchronized(self) {
        [self.urls removeObject:iImageURL];

        if ([self.urls count] == 0) {
            if ([[self.objectTokens valueForKey:self.objectDescription] boolValue]) {
                self.imageFetchCompletionBlock([self.failedURLs mutableCopy]);
            } else {
                dispatch_async(dispatch_get_main_queue(), ^{[UIApplication sharedApplication].networkActivityIndicatorVisible = NO; });
            }

            if (self.failedURLs && [self.failedURLs count] > 0) {
                [self.failedURLs removeAllObjects];
            }

            self.queue = nil;
        }
    }
}


- (NSString *)cacheDirectoryForImages {
    NSString *anImageCacheDirectory = kImageCacheDirectoryKey; // Your image cache directory 

    if (self.delegate && [self.delegate respondsToSelector:@selector(cacheDirectoryForImages)]) {
        anImageCacheDirectory = [self.delegate cacheDirectoryForImages];
    }

    return anImageCacheDirectory;
}

第 3 步:现在，让我们编写 cellForRowAtIndexPath。在这里，我使用了一个自定义单元格，它实现了一个 imageView 并且还期望一个自定义加载覆盖。您可以在此处放置加载叠加层。

- (UITableViewCell *)tableView:(UITableView *)iTableView cellForRowAtIndexPath:(NSIndexPath *)iIndexPath {
    NSString *cellType = @"defaultCell";
    MyCustomTableViewCell *cell = (MyCustomTableViewCell *)[iTableView dequeueReusableCellWithIdentifier:cellType];

    if (!cell) {
        cell = [[MyCustomTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:aCellType];
    }

    cell.textLabel.text = @“Dummy”; // Set your cell data

    NSString *anImageURL = self.productos[iIndexPath.row][@“image"];

    [cell.loadingOverlay removeView];
    cell.loadingOverlay = nil;

    // If image is present in Cache
    if (anImageURL && [anImageURL existsInCache]) {
        cell.imageView.image = [UIImage imageNamed:<Image from cache>];
    } else if ([[[MyImageFetchController sharedImageFetchController].objectTokens valueForKey:[self description]] boolValue]) {
        cell.imageView.image = [UIImage imageNamed:defaultImage];
        cell.loadingOverlay = [MyLoadingOverlay loadingOverlayInView:aCell.imageView];
    } else {
        cell.imageView.image = [UIImage imageNamed:defaultImage];
    }

    return cell;
}