smooth scrolling UITableView iPhone, with images

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];
                        });

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

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.

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.

[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];
                }