Sunday, April 28, 2013

Lazy Image Loading

Tutorial request from Senthil.P

1. Create a new Xcode Project, Single View Application template and add a tableview. (http://iosmadesimple.blogspot.com/2012/10/adding-uitableview-tutorial.html)

2. Create a custom table view cell.
(http://iosmadesimple.blogspot.com/2012/10/uitableviewcell-using-interface-builder.html)

3. Download SDWebImage latest framework here. (https://github.com/rs/SDWebImage/wiki/Download-Complied-Framework)

Assuming everything's done, what's left for us to do is to include SDWebImage Library and use it in our project.


4. Right-click to your Project Navigator, Add Files to your project.

Add "SDWebImage.framework" from the one you downloaded from Step 3. Check "Copy items into destination group's folder (if needed)"



5. In our project's Build Phases, under Link Binary With Libraries, click the ( + ) button.

And add "ImageIO.framework."
6. In our Project's Build Settings, search for "Other Linker Flags," double-click the right area of the "Other Linker Flags," click ( + ) button and input -ObjC


7. In the source files where you need to use the library,
#import <SDWebImage/UIImageView+WebCache.h>

8. Add an image file that will be used as our "placeholder" image. This image will be shown while the image from the URL has not yet finished loading.


9. Add entries to your array that holds the important information like the URL of the images you want to load.
- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    
    items = [[NSMutableArray alloc] init];
    [items addObject:@"http://i0.wp.com/hypebeast.com/image/2013/01/hot-toys-iron-man-3-mark-xlii-collectible-bust_1.jpg?w=1410"];
    [items addObject:@"http://t0.gstatic.com/images?q=tbn:ANd9GcT4PZc648WRoXzxEdLQA9zMGqBx93_um_HxvsjgYhoY3AvDtkzI"];
    [items addObject:@"http://i0.wp.com/hypebeast.com/image/2013/03/hot-toys-iron-man-3-iron-patriot-collectible-bust-2.jpg?w=930"];
    [items addObject:@"http://t3.gstatic.com/images?q=tbn:ANd9GcTf_6e7G9pIiw7ZlRRPfdq63NP-jRA6tmstL1ji-ZFEVnTkDjSp"];
    [items addObject:@"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinO2ufQwjCMHOhzFl6EcKEfs-4zkXEtX1FOQmAp7vUl3tCs0ome9KUOU_bAZdla02lwhdpOOyZMTl1S8vvvclt5HsyUpq9MJZl9GVzS8SWdwHJdZjO6ynYkdC3XB_TYZDdI_JGGpIs2Fk/s1600/iron-man-3.jpg"];
}

10. Edit our tableview's cellForRowAtIndexPath...
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @"MyImageCell";
    ImageCell *cell = (ImageCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    if (cell == nil) {
        NSArray* topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"ImageCell" owner:self options:nil];
        for (id currentObject in topLevelObjects) {
            if ([currentObject isKindOfClass:[UITableViewCell class]]) {
                cell = (ImageCell *)currentObject;
                break;
            }
        }
    }
    
    // Here we use the new provided setImageWithURL: method to load the web image
    [cell.imageView setImageWithURL:[NSURL URLWithString:[items objectAtIndex:indexPath.row]]  placeholderImage:[UIImage imageNamed:@"Hisoka.jpg"]];
    cell.imageSource.text = [items objectAtIndex:indexPath.row];
    
    return cell;
}

11. Hit Run!



There are still many ways to use SDWebImage Library, just check their API Documentation and other ways to use it in: (https://github.com/rs/SDWebImage)

Download Project here.


10 comments:

  1. This helped me out a lot, thank you :)

    ReplyDelete
  2. if i want to clear the cache, and load images on another view.How can I do that ?

    ReplyDelete
  3. Really Nice tutorial..jenn eve.. but
    If I would like to fetch xml data and images from URls using NSData & asynchronously loading of them.. How should i go?

    ReplyDelete
  4. Thank for this easy tutorial.

    I want to achieve UIActivityIndicator rather than PLACEHOLDER image.

    If it is possible with same SDWebImage.framework.

    How will I implement ?

    Reply soon..Thank you in advance.

    ReplyDelete
  5. Hello very nice tutorial....
    Is there any way to show the images into gallery and If there is one url having more then one Images init how to show them in that Image gallery.

    It Will be great if you reply this post

    ReplyDelete
  6. Am not able to download image from url start with "https:"

    ReplyDelete
  7. You can find an example for loading image asynchronously on UITableviewCell here

    https://github.com/obyadur-rahman/Who-s-Who

    ReplyDelete
  8. Great tutorial. It works like a charm. Thank you very much.

    ReplyDelete
  9. very good information,it helps me alot
    http://quincetravels.com

    ReplyDelete

Blocks From one Class to Another

One popular scenario in using blocks is when you need to update your view after a web service call is finished.