Objective C - Multithreading issue - iphone

Question

In my app, when user presses on the one of the tabs in UITabBar, it takes too much time to load view and show it to the user, so it may be confusing (it's because I load images from the web in the UITableView). So, I decided to use multithreading to show view before all the images finished loading.
I am using this code:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[SetsCustomCell alloc] initWithFrame:CGRectZero];
}
// getting url
NSURL* imgUrl = [[NSURL alloc]initWithString:[[mainArray objectAtIndex:
indexPath.row]valueForKey:#"imageURL"]];
//put this url and current cell in the dictionary
NSDictionary* params = [NSDictionary dictionaryWithObjectsAndKeys:
imgUrl,#"localUrl",cell,#"localCell", nil];
// multithreading time (calling loadImageWithParams method)
[self performSelectorInBackground:#selector(loadImageWithParams:)
withObject:params];
return cell;
}
-(void)loadImageWithParams:(NSDictionary*)params {
NSURL* url = [params objectForKey:#"localUrl"];
cell = [params objectForKey:#"localCell"];
UIImage* thumb = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
NSDictionary* backParams = [NSDictionary dictionaryWithObjectsAndKeys:
cell,#"localCell",thumb,#"thumb", nil];
[self performSelectorOnMainThread:#selector(setImage:)
withObject:backParams waitUntilDone:YES];
}
-(void)setImage:(NSDictionary*)params{
cell = [params objectForKey:#"localCell"];
UIImage* thumb = [params objectForKey:#"thumb"];
[cell.imageView setImage:thumb];
cell.imageView.hidden = NO;
[cell setNeedsLayout];
}
I have only two cells in the UITableView and the problem is that only second cell loads its image. The first cell is still empty. However, if I scroll the UITableView until the first cell is no longer visible, and it calls cellForRowAtIndexPath: again, first cell gets its image.
I have also tried to make multithreading with NSOperationQueue and GCD but have the same results.
It seems like I don't clearly understand how multithreading works but I will be veeeery grateful if someone will point me at my mistake.
Thanks!

Answer 1

The way I've done this in the past is to create an NSObject subclass to store the images. Then the datastore for the UITableView is an array of these objects instead of URL paths.
Then you can lazy load the image like this...
ObjectModel.h
#property (nonatomic, strong) UIImage *image;
ObjectModel.m
- (UIImage*)image
{
if (_image == nil) {
[self downloadImage];
return [UIImage imageNamed:#"placeholderImage"];
}
return _image;
}
- (void)downloadImage
{
//Put your async stuff here to download the image then reload the tableView when it's done.
}
By doing this you are storing the images on the datastore but also managing the download stuff in its own class and keeping your TVC clean.

Answer 2

It seems like you're overcomplicating this -- I don't really understand what you're doing with the params dictionary. Why not present the controller, then start your download in viewDidAppear. When the results come back, populate your array with them, and call reloadData. Do the cells have anything in them besides the images that you can load right away?

Answer 3

Typical practice for this is to implement a LazyUIImage class which downloads/loads the image in the background. While the image is downloading, display something like a UIActivityIndicator. When the image arrives in the LazyUIImage, send out a notification and stop the activity indicator (and remove it from the view perhaps). For every view controller that contains a LazyUIImage, handle that notification, and e.g., perform [myTable reloadData]. In LazyUIImage, write a method called getImage which returns nil while the image is loading, and after the image has loaded, return the image.
Edit: actually, if you implement the LazyUIImage as a LazyUIImageView then you don't need to reload anything in containing view controllers: in the LazyUIImageView place a top level background view, and then switch out the UIActivityIndicator child view for the actual UIImageView once the image finishes downloading.

Answer 4

You need to do Lazy loading stuff.. Search for lazy loading using NSOperationQueue.