View table with images, slow loading and scrolling

Question

I tried to implement about 30 tutorials today and just can't work anything.

My problem is that I load my information through a JSON file, add data to NSMutableArray, and then use a table to display everything. It works great when I don't have images, but when I do it the download is very slow and it scrolls very sticky. I understand after today's results that it reloads the images in each scroll, so it is slow.

Can anyone break it and make it easier for me to solve this problem?

Alex

Answer 1

Take a look at the Apple LazyTableImages example . It basically boils down to

a) reuse of your table cells

b) upload only visible images

Answer 2

You seem to have left your problem wide open. Performance issues can be related to a bunch of things. Here are some performance characteristics with cells and table images.

• Upload images to the background stream.

• Reuse cells - do not select more than what is needed on the screen

static NSString *CellIdentifier = @"Cell"; CellClass *cell = (CellClass*)[tv dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) cell = [[[CellClass alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease]; 

• Select only those images that have the same cell size (that is, if the cell is 44 px high, save UI images at a speed of 44 pixels). If the images are larger, you will have to process the images after they are downloaded from the Internet.

• Do not use uiimageview in your cell. instead, create a custom cell (i.e. a subclass) and draw an image in your drawRect: function.

Answer 3

You must use asynchronous image retrieval provided by the UIImageView categories found in AFNetworking or SDWebImage . These categories are:

• incredibly easy to use (instead of using the UIImageView setImage method, use one of the setImageWithURL category methods setImageWithURL );

• provide an asynchronous image;

• Download the downloaded images using NSCache to make sure that you do not need to download the images you just downloaded;

• make sure your user interface cannot get reverse loading of images for cells that scroll from the screen; and

• use operation queues to limit the degree of concurrency (instead of using global GCD queues, which can lead to timeout failures).

Answer 4

I have a class that I call RemoteImageHandler. Here is the .h file:

 #import <UIKit/UIKit.h> @interface RemoteImageHandler : NSObject - (void)imageForUrl:(NSURL*)url callback:(void(^)(UIImage *image))callback; + (RemoteImageHandler *)shared; @end 

And the .m file:

 #import "RemoteImageHandler.h" @interface RemoteImageHandler () @property (nonatomic, strong) NSMutableDictionary *imageDictionary; @end @implementation RemoteImageHandler - (void)imageForUrl:(NSURL*)url callback:(void(^)(UIImage *image))callback { if (!!self.imageDictionary[url]) { callback(self.imageDictionary[url]); } else { dispatch_async(dispatch_get_global_queue(0,0), ^{ NSData * data = [[NSData alloc] initWithContentsOfURL:url]; if (data == nil) callback(nil); dispatch_async(dispatch_get_main_queue(), ^{ UIImage *image = [UIImage imageWithData:data]; self.imageDictionary[url] = image; callback(image); }); }); } } + (TQRemoteImageHandler *)shared { static TQRemoteImageHandler *shared = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ shared = [[self alloc] init]; }); return shared; } @end 

In my table view, when I want an image from a remote place (let's say this is in cellForRowAtIndexPath, I use this:

 - (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier forIndexPath:indexPath]; [[RemoteImageHandler shared] imageForUrl:someURLCorrespondingToTheImageYouWant callback:^(UIImage *image) { cell.imageView.image = image; }]; return cell; }