Download data first then show it on TableViewcontroller

Question

I have tableviewcontroller and data fecthed from the server. I use following class to download the data asyn. but my problem is data is loading when user sees the tableViewcontroller. I want data being loaded before user sees.

    #import <SDWebImage/UIImageView+WebCache.h>

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    cell.textLabel.text = [[tableData objectAtIndex:indexPath.row] valueForKey:@"name"];
    cell.textLabel.font = [UIFont fontWithName:@"BebasNeue" size:24];
    cell.textLabel.textColor = [UIColor whiteColor];


    NSString *imageURLString=[[tableData objectAtIndex:indexPath.row] valueForKey:@"logo"];
    NSString* imageURL = [[tableData objectAtIndex:indexPath.row] valueForKey:@"picture"];
    [cell.imageView setImageWithURL:[NSURL URLWithString:imageURL]];

}

Answer 1

Solution

With SDWebImage you can download the image first.

Where?

It depends on your implementation. Maybe in a previous controller, or in your appDelegate. If the tableview appears in your initial viewcontroller, chances are to absolutely depend on the network speed.

Example Code

Take a look at this code (extracted from the Readme of the library, check the source!):

Manager *manager = [SDWebImageManager sharedManager];
[manager downloadWithURL:imageURL
                 options:0
                 progress:^(NSInteger receivedSize, NSInteger expectedSize)
                 {
                     // YOU DON'T NEED THIS
                 }
                 completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished)
                 {
                     if (image)
                     {
                         // MAYBE YOU WANT TO DO SOMETHING HERE
                     }
                 }];

Then, in your tableView:cellForRowAtIndexPath: method, you can just set the image like this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // ...
    NSURL* url = GET_IMAGE_URL;
    [cell.imageView setImageWithURL:url];
    // ...
}

How it works?

The library takes care of looking first in its cache, where it will find the previously downloaded image, because it uses the image urls as keys for the cache, so that the image appears inmediatly.

Answer 2

Issue

You are downloading data and loading it to the tableView async, that means your data process is executing on background, but the tableView is still active and it's shown.

My Solution

I handle this situation in two ways

1. You first load all the data in a NSArray or NSDictionary (whatever object you need) before presenting your TableViewController, and pass it as an argument to the TableViewController. In other words, you need to load data before presenting the tableViewController.

2. You need to create an animation view, or a loading view while you are performing the download of the data you tell the user that data is loading so wait until the process is done. And when the process is done, simply reload the tableView and pass the data to the TableViewCells.

Example

1) This code is used when you send request to server to get data (for example from JSON)

LoadingView *spinn = [LoadingView loadSpinnerIntoView:self.view];
dispatch_queue_t downloadQueue = dispatch_queue_create("LoadingView", NULL);
dispatch_async(downloadQueue, ^{

    // do our long running process here
    [NSThread sleepForTimeInterval:0.1];

    // do any UI stuff on the main UI thread
    dispatch_async(dispatch_get_main_queue(), ^{
        //Start downloading your data, and pass data you fetched to objects of NSDictionary

        //Your methods

        //After downloading data is done, reload data on tableView
        [tableView reloadData];

        //Remove loading view, and your tableViewController is all set
        [spinn removeSpinner];

    });});

2) After fetching data to NSDictionary or NSArray from the request you made, you have also links to download images.

For downloading image async without blocking mainThread you can refer to @sonxurxo question, or you can use this one which also uses SDWebImage

You just need to #import <SDWebImage/UIImageView+WebCache.h> to your project, and you can define also the placeholder when image is being downloaded with just this code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *MyIdentifier = @"MyIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:MyIdentifier] autorelease];
    }

    // Here we use the new provided setImageWithURL: method to load the web image
    [cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

    cell.textLabel.text = @"My Text";
    return cell;
}