Cache UIImage using uitableview from url

Question

I hava a uitableview , with custom cell containing two UImages. The logo images are taken from an online website, that's why there's a need to cache the images. Loading the image till now is made like this :

 NSURL * imageURL = [NSURL URLWithString:[arra1 objectAtIndex:indexPath.row / 2]];
 NSData * imageData = [NSData dataWithContentsOfURL:imageURL];

 NSURL * imageURL2 = [NSURL URLWithString:[arra2 objectAtIndex:indexPath.row / 2]];
 NSData * imageData2 = [NSData dataWithContentsOfURL:imageURL2];

 cell.ima1.image = [UIImage imageWithData:imageData];
 cell.ima2.image2 = [UIImage imageWithData:imageData2];

What i learned from searching , is that dataWithContentsOfURL is not asynchronous , and while scrolling it will take a lot of time. I tried several methods but i can't seem to get to right one. This is my first time caching UIImages , i would highly appreciate a detailed explanation with implementation so i could learn aside from getting the job done. Many Thanks

Answer 1

Checkout UIImageLoader https://github.com/gngrwzrd/UIImageLoader

Easy to load an image, and you get callbacks for all the scenarios you would want to handle:

NSURL * imageURL = myURL;   

[[UIImageLoader defaultLoader] loadImageWithURL:imageURL \

hasCache:^(UIImage *image, UIImageLoadSource loadedFromSource) {

    //there was a cached image available. use that.
    self.imageView.image = image;

} sendRequest:^(BOOL didHaveCachedImage) {

    //a request is being made for the image.

    if(!didHaveCachedImage) {
        //there was not a cached image available, set a placeholder or do nothing.

        self.loader.hidden = FALSE;
        [self.loader startAnimating];

        self.imageView.image = [UIImage imageNamed:@"placeholder"];
    }

} requestCompleted:^(NSError *error, UIImage *image, UIImageLoadSource loadedFromSource) {

    //network request finished.

    [self.loader stopAnimating];
    self.loader.hidden = TRUE;

    if(loadedFromSource == UIImageLoadSourceNetworkToDisk) {
        //the image was downloaded and saved to disk.
        //since it was downloaded it has been updated since
        //last cached version, or is brand new

        self.imageView.image = image;
    }
}];

Answer 2

I use this Library which is just perfect

• SDWebImage

You just need to #import <SDWebImage/UIImageView+WebCache.h> to your project, and you can define also the placeholder when image is being downloaded with just this code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *MyIdentifier = @"MyIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:MyIdentifier] autorelease];
    }

    // Here we use the new provided setImageWithURL: method to load the web image
    [cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

    cell.textLabel.text = @"My Text";
    return cell;
}

It also cache downloaded images and gives you great performance.

Hope it will help you!

Answer 3

You can check these sample application

1. LazyTableImages - Sample application from Apple
2. MonoTouch-LazyTableImages
3. robertmryan- LazyTableImages - Explains clearly the limitations from apple's sample application.

Hope this helps.

Answer 4

SDWebImage, in my opinion, is the best option.

You simply include it in your app and use it like this:

• SDWebImageManager *manager = [SDWebImageManager sharedManager];
  
  [manager downloadWithURL:[NSURL URLWithString:image_url]
                   options:0
                  progress:nil
                 completed:^(UIImage *images, NSError *error, SDImageCacheType cacheType, BOOL complete) {
  
                     myImageView.image = images;
                 }] ;
  

It download images asynchronously, so it does not block UI.