Lazy load images in UITableView

I have some 50 custom cells in my UITableView. I want to display an image and a label in the cells where I get the images from URLs.

I want to do a lazy load of images so the UI does not freeze up while the images are being loaded. I tried getting the images in separate threads but I have to load each image every time a cell becomes visible again (Otherwise reuse of cells shows old images). Can someone please tell me how to duplicate this behavior.

Try AFNetworking class download this class in this link https://github.com/AFNetworking/AFNetworking . Add the all AFNetworking class in your project.Then just import this category

#import "UIImageView+AFNetworking.h" in your Viewcontroller which contains your Tableview.

Then in cellForRowAtIndexPath: put like below

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    
    if (cell == nil) 
    {
        cell = [[CustomCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    
    [cell.imageView setImageWithURL:[NSURL URLWithString:[UrlArray objectAtIndex:indexPath.row]] placeholderImage:[UIImage imageNamed:@"placeholder.jpg"]];
     cell.myLabel.text = [imageNameArray objectAtIndex:indexPath.row];
    
     cell.selectionStyle = UITableViewCellSelectionStyleNone;
    
    return cell;    
}

This download your Image for imageView in the UITableviewcell asynchronously. It wont download again and again while the user scroll the Tableview, because it has cache also. Once your image download it save the image with key of your imageUrl. I hope it useful for you.

I'd suggest going for an NSOperation and doing whatever you need on another thread.

This is a class I wrote for image loading:

- (id)initWithTarget:(id)trgt selector:(SEL)sel withImgURL:(NSString *)url {
	if(self = [super init]) {
		if(url == nil || [url isEqualToString:@""])
			return nil;
		target = trgt;
		action = sel;
		imgURL = [[NSURL alloc] initWithString: url];
	}
	return self;
}

- (void)main {
	[NSThread detachNewThreadSelector:@selector(loadImage) toTarget:self withObject:nil];
}

- (void)loadImage {
	NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
	UIImage *img = [UIImage imageNamed: @"default_user.png"];
	if(![[imgURL absoluteString] isEqualToString: @"0"]) {
		NSData *imgData = [NSData dataWithContentsOfURL: imgURL];
		img = [UIImage imageWithData: imgData];
	}
	if([target respondsToSelector: action])
		[target performSelectorOnMainThread: action withObject: img waitUntilDone: YES];
	[pool release];
}

- (void)dealloc {
	[imgURL release];
	[super dealloc];
}

Hope that helps!

you can use ego image button..you can download ego image button files from github...add in your project....

change the class " ego image button" at image view in your xib...

lazy loading is called synchronous request..

ego image is called asynchronous request. ego image dont wait for response..display all images at one time..

Maybe you can have a try ALImageView.It is much simpler than SDWebImage.You only need two source files(ALImageView.h/ALImageView.m).You can reuse the image view to reload different urls in a tableview cell.

1. Support local and memory cache;
2. Support place holders;
3. Support tap touch(target-action);
4. Support corner for the image view;

There is also a good demo.

you can try this lazyTableImages ,

---

i had customized lazyTableImages this project into a very simple one (customizeLazyTableImages ) and removed all extra codes with some static urls and titles only this is loading images very smoothly and caching them

---

I think there is another way to solve that problem if you want to load that image then at the start of the view thats mean

when -(void)loadView is loading, then just allocate these images and take it into a nsarray now when table cell is loading then make your view at the table cell and according to the indexPath.row just replace these images of nsarray into that view as a background image or make subview of these images on that new view of tablecell using nsarray index and indexPath.row of the tableview cell.

You can use the NSOperation queue or GCD for loading images in the background.

If you don't want to load images again and again, you can use NSCache or the file system for storing the images.

I am not aware of any built in way to accomplish this but it sounds like you have something working with another thread already.

Assuming that your only remaining problem now is invalidating the contents of a cell when it comes back into view you should look at:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

By implementing this delegate method you could check the contents of the cell before it draws to see if it needs new contents. If it does then you could empty the cells contents and trigger your threaded loading again.

You might also consider posting some code.