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.