SDWebImage在单元格中重复图像而不是等待加载。 [英] SDWebImage repeating images in cell instead of waiting to load.

问题描述

我正在使用SDWebImage将图像从服务器提取到IOS中的表视图应用程序。
但问题是，当我在表格视图中向下滚动而不是等待图像加载时，将图像下载到表格视图的前几行并重复这些图像直到结束行和下载时图像将这些重复的图像更改为该行的实际图像。

I am using SDWebImage for fetching images from server to my table view app in IOS. But the problem is that when I scroll down in table view instead of waiting for the images to load it put the images downloaded in the first few rows of table view and repeat those images till the end row and when it downloads the images it changes those repeated images to the actual image for that row.

      NSURL * url = [NSURL URLWithString:string];

    SDWebImageManager *manager = [SDWebImageManager sharedManager];
    [manager downloadImageWithURL:url
                     options:0
                    progress:^(NSInteger receivedSize, NSInteger expectedSize)
     {
         // progression tracking code
     }
                   completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished,NSURL * url)
     {
         if (finished && image  )
         {

             NSArray *visibleIndexPaths = [tableView indexPathsForVisibleRows];
                 if ([visibleIndexPaths containsObject:indexPath]) {

                         cell.myImage.image = image;

                 }

         }

     }];

推荐答案

实际上，这不是<$ c的错误$ c> SDWebImage ，而是 UITableView 的工作原理。 downloadImageWithURL ，是一个异步进程，因此当调用tableView委托/数据源方法时，图像尚未下载，因此 cellForRow 没有要显示的图像。
要解决此问题，您应首先检查缓存中的图像

Actually, it is not a bug with SDWebImage, but rather it's the nature of how UITableView works. downloadImageWithURL, is an async process,so when your tableView delegate/datasource methods are called, the image isn't downloaded yet, therefore cellForRow doesn't have an image to display. To overcome this issue you should first check image from cache as

[[SDWebImageManager sharedManager] diskImageExistsForURL:[NSURL URLWithString:ImageUrl]]

如果是，则将图像设置为UIImageView，否则使用 downloadImageWithURL 下载图像并添加单元格标记（将图像显示为正确的行）

if yes then set image to UIImageView otherwise use downloadImageWithURL to download image and add cell tag(To display image to correct row) as

cell.tag = indexPath.row;

成功下载后首先检查正确的行为

on successfull download first check correct row as

if(cell.tag == indexPath.row){

并将图像设置为UIImageView.Here是setImage方法。

and set image to UIImageView.Here is setImage method.

-(void)setImage:(SLFirstTableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath{
    SLFirstTableViewCellItem * slFirstTableViewCellItem = [self.categories objectAtIndex:indexPath.row]; // categories is array of items,replace with yours.

    NSString *ImageUrl = slFirstTableViewCellItem.imageUrl; //assume image url is in slFirstTableViewCellItem object.

    cell.tag = indexPath.row;

    if([[SDWebImageManager sharedManager] diskImageExistsForURL:[NSURL URLWithString:ImageUrl]]){
        [cell.imgItem setImage: [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:ImageUrl]];
        [self hideProgressView:cell];
    }else{
        [self showProgressView:cell];

        [SDWebImageDownloader.sharedDownloader downloadImageWithURL:[NSURL URLWithString:ImageUrl]
                                                            options:0
                                                           progress:^(NSInteger receivedSize, NSInteger expectedSize)
         {
             // progression tracking code
         }
                                                          completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished)
         {

             if (image && finished)
             {
                 [[SDImageCache sharedImageCache] storeImage:image forKey:ImageUrl]; // cache image

                 if(cell.tag == indexPath.row){ // check if correct row
                     [cell.imgItem setImage:image];
                     [self hideProgressView:cell];
                 }
             }else{
                 cell.imgItem.hidden = YES;
                 cell.progressBar.hidden = YES;
             }
         }];
    }
}

并定义 showProgressView 和 hideProgressView 方法为

-(void)showProgressView:(SLFirstTableViewCell *)cell {
    cell.progressText.hidden = NO;
    cell.progressBar.hidden = NO;
    cell.imgItem.hidden = YES;
    [cell.progressBar startAnimating];
    [cell.progressText setText:@"Loading Image..."];
}

-(void)hideProgressView:(SLFirstTableViewCell *)cell{
    cell.progressBar.hidden = YES;
    cell.progressText.hidden = YES;
    cell.imgItem.hidden = NO;
    [cell.progressBar stopAnimating];
}

最后调用 setImage 从 cellForRowAtIndexPath 方法（在返回单元格之前）

finally call setImage from cellForRowAtIndexPath method(before returning cell) as

[self setImage:cell atIndexPath:indexPath];

这篇关于SDWebImage在单元格中重复图像而不是等待加载。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！