How to efficiently load images in UITableView? - ios

Question

I have a UITableView that will contain a high number of images.
Each cell will have 5 images, that are loaded randomly from Parse.com.
My query code, right now, is in cellForRowAtIndexPath.
This causes a few issues:
1.) There's some lag/delay when scrolling the table.
2.) The images, now for some odd reason, are not showing in the proper location.
3.) The images reload/change every time the table is scrolled.
I'd like for the images to be "loaded" just once when on this UIView, in the correct place, and with smooth scrolling.
What's the best way to handle this?
Here's the code for how I am loading the images:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// set up the cell here
// query and display random images from parse.com
PFQuery * query = [PFUser query];
[query whereKey:#"category" equalTo:self.cell.label.text];
[query findObjectsInBackgroundWithBlock:^(NSArray *objects, NSError *error) {
if (error)
{
NSLog(#"Error: %# %#", error, [error userInfo]);
}
else
{
for (int i = 0; i < objects.count; i++)
{
self.profilePicObject = [objects objectAtIndex:i];
int imgRandom = arc4random() % [objects count];
self.randomProfilePicObject = [objects objectAtIndex:imgRandom];
self.imageFile = [self.randomProfilePicObject objectForKey:#"imageFile"];
NSURL * imageFileURL = [[NSURL alloc] initWithString:self.imageFile.url];
NSData * imageData = [NSData dataWithContentsOfURL:imageFileURL];
UIImage * aImage = [[UIImage alloc] initWithData:imageData];
self.cell.profilePicOne.image = aImage;
}
}
return self.cell;
}
EDIT:
I'm using SDWebImage and the table now scrolls smoothly and images are displaying.
The new issue:
Images are loading in wrong cells.
I'm querying the table and matching the label text to the proper string in my Parse table and using that to display the proper image.
Initially, some images load in the correct cell and some do not.
When I scroll, images appear all over the place.
What's the best way to fix this?
Here is how I am setting up the cells:
static NSString * cellIdentifier = #"FilterSelectCell";
self.cell = (FilterSelectCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (self.cell == nil)
{
NSArray * nib = [[NSBundle mainBundle] loadNibNamed:#"FilterSelectCell" owner:self options:nil];
self.cell = [nib objectAtIndex:0];
self.cell.profilePicOne.clipsToBounds = YES;
self.cell.profilePicOne.layer.cornerRadius = 20.0;
self.cell.profilePicTwo.clipsToBounds = YES;
self.cell.profilePicTwo.layer.cornerRadius = 20.0;
self.cell.profilePicThree.clipsToBounds = YES;
self.cell.profilePicThree.layer.cornerRadius = 20.0;
self.cell.profilePicFour.clipsToBounds = YES;
self.cell.profilePicFour.layer.cornerRadius = 20.0;
self.cell.profilePicFive.clipsToBounds = YES;
self.cell.profilePicFive.layer.cornerRadius = 20.0;
}
self.cell.label.text = [self.myArray objectAtIndex:indexPath.row];

Answer 1

The best solution would be to use an image caching system such as SDWebImage to prevent duplicate web queries for the same image. It is extremely easy to use and lets you use a placeholder loading image while downloading the image data from the URL. It also loads images asynchronously so your UI isn't blocked and it will release images from the cache before your application is overloaded. You simply load images like this and SDWebImage does the magic:
[self.cell.profilePicOne setImageWithURL:imageFileURL placeholderImage:[UIImage imageNamed:#"LOADING_IMAGE.png"]];
SDWebImage Repository

Answer 2

Lazy loading is the better solution for this take a look on the following discussion
Lazy loading UITableView with multiple images in each cell

Answer 3

Use Asynchronous image downloader with cache support with an UIImageView category.I have been using this for long time.Damn sure ur problem may overcome with this SDWebImage

Answer 4

You can checkout this utility APSmartStorage.
It supports downloading, memory and disk cache.