PicSlide uses a table that lets you choose a picture to play with. For each picture it shows a thumbnail. When the thumbnails are loaded from the application’s resources, you don’t have to be too concerned with image loading time.However, when I load those thumbnails from the web, as I do now with the Magic Panda, scrolling the table can become extremely slow.
Previously, I was loading the thumbnail directly from my table data source’s cellForRowAtIndexPath: method.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"tvCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { [[NSBundle mainBundle] loadNibNamed:@"tvCell" owner:self options:nil]; cell = tvCell; self.tvCell = nil; } NSString *url = [picUrls objectAtIndex: indexPath.row]; UIImageView *img = (UIImageView*)[cell viewWithTag: 2]; img.image = [UIImage imageWithData: [NSData dataWithContentsOfURL:[NSURL URLWithString: url]]]; }
If you don’t have too many rows, a NSMutableDictionary makes a quick & easy image cache. I simply added one method to implement image caching:
NSMutableDictonary *imageCache; - (UIImage *)getCachedImage: (NSString*)url { UIImage* theImage = [imageCache objectForKey:url]; if ((nil != theImage) && [theImage isKindOfClass:[UIImage class]]) { return theImage; } else { theImage = [UIImage imageWithData: [NSData dataWithContentsOfURL:[NSURL URLWithString: url]]]; [imageCache setObject:theImage forKey:url]; return theImage; } }
When I load my table, I now call getCachedImage rather than fetching the image directly.
img.image = [self getCachedImage: url];
The result can be seen below:
4 responses to “Quick and easy image caching for UITableViews”