Image not loading immediately in Table View

Question

I'm using SDWebImage and grabbing Images associated with a news article from a news API.

The problem is, the images for the cells on screen aren't loading until I start scrolling on the UITableView. Once I scroll past a cell, and it goes off screen, once I come back to it the Image will finally be loaded.

Here is my (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath code:

if ([feedLocal.images count] == 0) {
    [cell.imageView setImage:[UIImage imageNamed:@"e.png"]];
}
else {    
    Images *imageLocal = [feedLocal.images objectAtIndex:0];
    NSString *imageURL = [NSString stringWithFormat:@"%@", imageLocal.url];
    NSLog(@"img url: %@", imageURL);

    // Here we use the new provided setImageWithURL: method to load the web image
    __weak UITableViewCell *wcell = cell;
    [cell.imageView setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@", imageURL]]
                   placeholderImage:[UIImage imageNamed:@"115_64.png"]
                          completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                              if(image == nil) {
                                  [wcell.imageView setImage:[UIImage imageNamed:@"115_64.png"]];
                                   //];
                              }
                          }
    ];
}

Any idea why this would be happening? It just seems like when the UITableView loads, the Images aren't being told to load or something until scrolling begins?

Any suggestion is much appreciated, thanks!

Answer 1

I have earlier encountered a similar issue and it turned out the images in the tableview were downloading correctly. The real issue you are facing is the refresh issue. When each image is downloaded, it has to be refreshed in order to be shown in the tableview. In my case, the downloading part was done in a separate file, so i used NSNotificationCenter to tell the tableview controller class to refresh it. Here is what you can do with your code:

if ([feedLocal.images count] == 0) {
    [cell.imageView setImage:[UIImage imageNamed:@"e.png"]];
}
else {    
    Images *imageLocal = [feedLocal.images objectAtIndex:0];
    NSString *imageURL = [NSString stringWithFormat:@"%@", imageLocal.url];
    NSLog(@"img url: %@", imageURL);

    // Here we use the new provided setImageWithURL: method to load the web image
    __weak UITableViewCell *wcell = cell;
    [cell.imageView setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@", imageURL]]
                   placeholderImage:[UIImage imageNamed:@"115_64.png"]
                          completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                              if(image == nil) {
                                  [wcell.imageView setImage:[UIImage imageNamed:@"115_64.png"]];
                                  [[NSNotificationCenter defaultCenter] postNotificationName:@"ImageDownloaded" object:nil];
                                   //];
                              }
                          }
    ];
}

and then you can call reload data using it as below:

- (void) imageDownloaded:(NSNotification *)notification{

    [self.tableView reloadData];
}

This way you don't need to scroll in order to see the image, instead they will be shown right after they are downloaded.

Hope this helps!