在滚动之前,SDWebImage不会加载远程图像

Question

我正在使用SDWebImage库将远程图像加载到一个表视图中,该视图使用我创建的自定义单元类.我只是用

[cell.imageView setImageWithURL:url placeholderImage:[UIImage imageNamed:@"loading.jpg"]];

in cellForRowAtIndexPath:现在的问题是它只在可见单元格中加载图像,而不是在屏幕上为我必须向上和向下滚动以加载图像的单元格.有没有办法我可以加载所有图像,而无需滚动表格视图.提前致谢!!

Answer 1

如果要预取行,可以响应UIScrollViewDelegate方法以确定表滚动何时完成,从而触发行的预取.您可以使用SDWebImagePrefetcher(在我原来的答案中,我对这个有用的类有点不屑一顾,但现在看起来效果相对较好):

- (void)viewDidLoad
{
    [super viewDidLoad];

    // the details don't really matter here, but the idea is to fetch data, 
    // call `reloadData`, and then prefetch the other images

    NSURL *url = [NSURL URLWithString:kUrlWithJSONData];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        if (connectionError) {
            NSLog(@"sendAsynchronousRequest error: %@", connectionError);
            return;
        }

        self.objects = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

        [self.tableView reloadData];

        [self prefetchImagesForTableView:self.tableView];
    }];
}

// some of the basic `UITableViewDataDelegate` methods have been omitted because they're not really relevant

这是简单的cellForRowAtIndexPath(不完全相关,但只是表明,如果你使用SDWebImagePrefetcher,你不必乱用cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"Cell";
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    NSAssert([cell isKindOfClass:[CustomCell class]], @"cell should be CustomCell");

    [cell.customImageView setImageWithURL:[self urlForIndexPath:indexPath] placeholderImage:nil];
    [cell.customLabel setText:[self textForIndexPath:indexPath]];

    return cell;
}

UIScrollViewDelegate滚动完成时,这些方法会预取更多行

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // if `decelerate` was true for `scrollViewDidEndDragging:willDecelerate:`
    // this will be called when the deceleration is done

    [self prefetchImagesForTableView:self.tableView];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    // if `decelerate` is true, then we shouldn't start prefetching yet, because
    // `cellForRowAtIndexPath` will be hard at work returning cells for the currently visible
    // cells.

    if (!decelerate)
        [self prefetchImagesForTableView:self.tableView];
}

您显然需要实现预取例程.这将获取NSIndexPath可见单元格每一侧的单元格值,获取其图像URL,然后预取该数据.

/** Prefetch a certain number of images for rows prior to and subsequent to the currently visible cells
 *
 * @param  tableView   The tableview for which we're going to prefetch images.
 */

- (void)prefetchImagesForTableView:(UITableView *)tableView
{
    NSArray *indexPaths = [self.tableView indexPathsForVisibleRows];
    if ([indexPaths count] == 0) return;

    NSIndexPath *minimumIndexPath = indexPaths[0];
    NSIndexPath *maximumIndexPath = [indexPaths lastObject];

    // they should be sorted already, but if not, update min and max accordingly

    for (NSIndexPath *indexPath in indexPaths)
    {
        if (indexPath.section < minimumIndexPath.section || (indexPath.section == minimumIndexPath.section && indexPath.row < minimumIndexPath.row)) minimumIndexPath = indexPath;
        if (indexPath.section > maximumIndexPath.section || (indexPath.section == maximumIndexPath.section && indexPath.row > maximumIndexPath.row)) maximumIndexPath = indexPath;
    }

    // build array of imageURLs for cells to prefetch

    NSMutableArray *imageURLs = [NSMutableArray array];
    indexPaths = [self tableView:tableView priorIndexPathCount:kPrefetchRowCount fromIndexPath:minimumIndexPath];
    for (NSIndexPath *indexPath in indexPaths)
        [imageURLs addObject:[self urlForIndexPath:indexPath]];
    indexPaths = [self tableView:tableView nextIndexPathCount:kPrefetchRowCount fromIndexPath:maximumIndexPath];
    for (NSIndexPath *indexPath in indexPaths)
        [imageURLs addObject:[self urlForIndexPath:indexPath]];

    // now prefetch

    if ([imageURLs count] > 0)
    {
        [[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:imageURLs];
    }
}

这些是获取NSIndexPath紧邻可见单元格之前的行以及紧跟可见单元格之后的行的实用方法:

/** Retrieve NSIndexPath for a certain number of rows preceding particular NSIndexPath in the table view.
 *
 * @param  tableView  The tableview for which we're going to retrieve indexPaths.
 * @param  count      The number of rows to retrieve
 * @param  indexPath  The indexPath where we're going to start (presumably the first visible indexPath)
 *
 * @return            An array of indexPaths.
 */

- (NSArray *)tableView:(UITableView *)tableView priorIndexPathCount:(NSInteger)count fromIndexPath:(NSIndexPath *)indexPath
{
    NSMutableArray *indexPaths = [NSMutableArray array];
    NSInteger row = indexPath.row;
    NSInteger section = indexPath.section;

    for (NSInteger i = 0; i < count; i++) {
        if (row == 0) {
            if (section == 0) {
                return indexPaths;
            } else {
                section--;
                row = [tableView numberOfRowsInSection:section] - 1;
            }
        } else {
            row--;
        }
        [indexPaths addObject:[NSIndexPath indexPathForRow:row inSection:section]];
    }

    return indexPaths;
}

/** Retrieve NSIndexPath for a certain number of following particular NSIndexPath in the table view.
 *
 * @param  tableView  The tableview for which we're going to retrieve indexPaths.
 * @param  count      The number of rows to retrieve
 * @param  indexPath  The indexPath where we're going to start (presumably the last visible indexPath)
 *
 * @return            An array of indexPaths.
 */

- (NSArray *)tableView:(UITableView *)tableView nextIndexPathCount:(NSInteger)count fromIndexPath:(NSIndexPath *)indexPath
{
    NSMutableArray *indexPaths = [NSMutableArray array];
    NSInteger row = indexPath.row;
    NSInteger section = indexPath.section;
    NSInteger rowCountForSection = [tableView numberOfRowsInSection:section];

    for (NSInteger i = 0; i < count; i++) {
        row++;
        if (row == rowCountForSection) {
            row = 0;
            section++;
            if (section == [tableView numberOfSections]) {
                return indexPaths;
            }
            rowCountForSection = [tableView numberOfRowsInSection:section];
        }
        [indexPaths addObject:[NSIndexPath indexPathForRow:row inSection:section]];
    }

    return indexPaths;
}

那里有很多,但实际上,SDWebImage它SDWebImagePrefetcher正在做繁重的工作.

为了完整起见,我在下面提供了我原来的答案.

原始答案:

如果你想做一些预取SDWebImage,你可以做类似以下的事情:

1. 在setImageWithURL通话中添加完成块:

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
   {
       NSLog(@"%s", __FUNCTION__);
   
       static NSString *cellIdentifier = @"Cell";
       UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
   
       TableModelRow *rowData = self.objects[indexPath.row];
   
       cell.textLabel.text = rowData.title;
       [cell.imageView setImageWithURL:rowData.url
                      placeholderImage:[UIImage imageNamed:@"placeholder.png"]
                             completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                                 [self prefetchImagesForTableView:tableView];
                             }];
   
       return cell;
   }
   

   我必须承认我不喜欢prefetcher在这里调用我的例程(我希望iOS有一些很好的didFinishTableRefresh委托方法),但是它有效,即使它调用例程比我真正想要的多.我只是确保下面的例程确保它不会发出冗余请求.

2. 无论如何,我编写了一个预取例程来查找接下来的十个图像:

   const NSInteger kPrefetchRowCount = 10;
   
   - (void)prefetchImagesForTableView:(UITableView *)tableView
   {
       // determine the minimum and maximum visible rows
   
       NSArray *indexPathsForVisibleRows = [tableView indexPathsForVisibleRows];
       NSInteger minimumVisibleRow = [indexPathsForVisibleRows[0] row];
       NSInteger maximumVisibleRow = [indexPathsForVisibleRows[0] row];
   
       for (NSIndexPath *indexPath in indexPathsForVisibleRows)
       {
           if (indexPath.row < minimumVisibleRow) minimumVisibleRow = indexPath.row;
           if (indexPath.row > maximumVisibleRow) maximumVisibleRow = indexPath.row;
       }
   
       // now iterate through our model;
       // `self.objects` is an array of `TableModelRow` objects, one object
       // for every row of the table.
   
       [self.objects enumerateObjectsUsingBlock:^(TableModelRow *obj, NSUInteger idx, BOOL *stop) {
           NSAssert([obj isKindOfClass:[TableModelRow class]], @"Expected TableModelRow object");
   
           // if the index is within `kPrefetchRowCount` rows of our visible rows, let's
           // fetch the image, if it hasn't already done so.
   
           if ((idx < minimumVisibleRow && idx >= (minimumVisibleRow - kPrefetchRowCount)) ||
               (idx > maximumVisibleRow && idx <= (maximumVisibleRow + kPrefetchRowCount)))
           {
               // my model object has method for initiating a download if needed
   
               [obj downloadImageIfNeeded];
           }
       }];
   }
   

3. 在下载例程中,您可以检查图像下载是否已开始,如果没有,则启动它.为此SDWebImage,我保留了一个weak指向我的TableModelRow类中的Web图像操作的指针(支持我的表的各行的模型类):

   @property (nonatomic, weak) id<SDWebImageOperation> webImageOperation;
   

   然后我downloadImageIfNeeded开始下载例程,如果它还没有(你可以看到为什么weak这么重要......我正在检查这行是否已经有一个操作挂起,然后再启动另一个).我没有对下载的图像做任何事情(为了调试目的,记录下载完成的事实),而只是下载并让SDImageWeb我跟踪缓存的图像,所以当cellForRowAtIndexPath以后请求图像为用户向下滚动,它就在那里,准备好并等待.

   - (void)downloadImageIfNeeded
   {
       if (self.webImageOperation)
           return;
   
       SDWebImageManager *imageManager = [SDWebImageManager sharedManager];
   
       self.webImageOperation = [imageManager downloadWithURL:self.url
                                                      options:0
                                                     progress:nil
                                                    completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished) {
                                                        NSLog(@"%s: downloaded %@", __FUNCTION__, self.title);
                                                        // I'm not going to do anything with the image, but `SDWebImage` has now cached it for me
                                                    }];
   }
   

   我的一部分认为首先调用imageManager.imageCache实例方法可能会更健壮queryDiskCacheForKey,但在进行一些测试之后,它看起来并不像需要的那样(downloadWithURL无论如何,这对我们来说都是如此).

我应该指出该SDImageWeb库确实有一个SDWebImagePrefetcher类(参见文档).这个类的名称是非常有前途的,但看着代码,完全尊重一个优秀的库,这对我来说感觉不是很强大(例如,它是一个简单的URL列表,如果你再次这样做,它取消了先前的列表,没有"添加到队列"或类似的东西的概念).这是一个很有希望的概念,但在执行方面有点弱.当我尝试它时,我的用户体验明显遭受了损失.

所以,我倾向于不使用SDWebImagePrefetcher(直到它得到改善,至少),并坚持我的基本预取技术.它不是非常复杂,但似乎有效.