smooth scrolling UITableView iPhone, with images

Question

EDIT: after reading the answers below and looking at all the guides i am now lost, i am too noob to figure it out.

i don't want the coding done for me, i need some clear cut advice on how to set up a seperate thread and then reference it to my tableView.

Any tutorials for a NOOB?!?

---

this is the code i have set up for putting images into my tableView. All the images load but only when scrolling through the table.

How can this be stopped?

Any help would be appreciated.

NSString *userImage = [(Tweet*)[profile objectAtIndex:indexPath.row]  profileImage];
            dispatch_async(dispatch_get_global_queue(0, 0), ^{
            NSData* imageData = [[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:[(Tweet*)[profile objectAtIndex:indexPath.row]  profileImage]]];          
            dict =[[NSMutableDictionary alloc]init];
                //UIImage *retImage =[dict  objectForKey:(@"%@", userImage)];
                UIImage *retImage =[dict  objectForKey:userImage];
                dispatch_async(dispatch_get_main_queue(), ^{
                        if (!retImage) {
                        UIImage *profileImage=[UIImage imageWithData:imageData];
                        [dict setObject:profileImage forKey:userImage];
        }
                    UIImage *retImage2 =[dict  objectForKey:userImage];
                    photo.image = retImage2;


                        [imageData release];
                        });

Answer 1

Loading the images on a background thread is one option. The better alternative would be to use NSOperationQueue that autmagically handles the background threads.

Apple has provided a sample for the same.

Please have a look at Lazy Loading Of TableViewCells

I hope it helps :)

EDIT: If you dont know, or dont want to use threads, then there is another alternate for that. Check this out: downloading-images-for-table-without-threads

Answer 2

How big are your images? You may want to scale them down before putting them in the tableView.

something like:

    #define kImageSize 44 
   // Create a thumbnail version of the image for the oject.
CGSize size = newImage.size;
CGFloat ratio ;
if (size.width > size.height) {
        ratio = kImageSize / size.width;
} else {
    ratio = kImageSize/ size.height;
}
CGRect rect = CGRectMake(0.0, 0.0, ratio * size.width, ratio * size.height);

if (NULL != UIGraphicsBeginImageContextWithOptions) { //test that function is available
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);  //allow iphone4 to use higher-res
} else {
    UIGraphicsBeginImageContext(rect.size);
}
[newImage drawInRect:rect];
userThumbnailImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Also, I note that every time your image is in the dictionary, you'll be storing again; you probably want to put the caching line back in the (!photo.image) clause.

Answer 3

Download the images in a background thread, and when the images become available set them into the UIImageView in the table view cell. You're stalling the main thread with loading your images over the network.

Answer 4

[SOLVED] i added an if statement, it's not optimal but it only lags if the picture doesn't exist.

                    if (!image) {
                    [activityIndicator startAnimating];
                        UIImage *phoneImage=[UIImage imageWithData:[[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:userImage]]];
                        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, 
                                                                             NSUserDomainMask, YES);
                        NSString *documentsDirectory = [paths objectAtIndex:0];
                        NSString* path = [documentsDirectory stringByAppendingPathComponent:
                                          [NSString stringWithFormat:@"%@:%@", imageName, fileName]  ];
                        NSData* data = UIImagePNGRepresentation(phoneImage);
                        [data writeToFile:path atomically:YES];
                                            }               
                else{
                    photo.image=image;
                    [activityIndicator stopAnimating];
                }