IPhone UITableView jerky when scrolling

Question

I'm loading my table from an XML feed in to an array then creating the cells as the code below shows. It can be really jerky when loading sometimes. I thought that was just the images downloading when I scroll but I removed them to test and sometimes it was still jerky. Can't work out what I'm doing wrong!

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    const NSInteger BOTTOM_LABEL_TAG = 1002;
    const NSInteger TEXT_FIELD_TAG = 1003;

    UILabel *Labelcompanyname;
    UILabel *Labeldistance;

    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {

        cell =
        [[[UITableViewCell alloc]
          initWithStyle:UITableViewCellStyleDefault
          reuseIdentifier:CellIdentifier]
         autorelease];


        const CGFloat LABEL_HEIGHT = 15;


        int spaceSize;

        if(currentType == @"categorySearch"){

                spaceSize = 57;
        }
        else {

                spaceSize = 34;
        }


        Labelcompanyname =
        [[[UILabel alloc]
          initWithFrame:
          CGRectMake(
                     spaceSize + 2.0 * cell.indentationWidth,
                     0.5 * (tableView.rowHeight - 2 * LABEL_HEIGHT)+10,
                     tableView.bounds.size.width -
                     spaceSize - 20.0,
                     LABEL_HEIGHT)]
         autorelease];
        [cell.contentView addSubview:Labelcompanyname];


        Labeldistance =[[[UILabel alloc]
                         initWithFrame:
                         CGRectMake(
                                    spaceSize + 2.0 * cell.indentationWidth,
                                    0.5 * (tableView.rowHeight - 2 * LABEL_HEIGHT)+40,
                                    tableView.bounds.size.width -
                                    spaceSize - 20.0,
                                    LABEL_HEIGHT)]
                        autorelease];
        if(currentType == @"categorySearch") {
            [cell.contentView addSubview:Labeldistance];

        } 


        Labelcompanyname.tag = BOTTOM_LABEL_TAG;
        Labelcompanyname.font = [UIFont systemFontOfSize:[UIFont labelFontSize] - 2];

        Labeldistance.tag = TEXT_FIELD_TAG;
        Labeldistance.font = [UIFont systemFontOfSize:[UIFont labelFontSize] - 2];

        cell.backgroundView = [[[UIImageView alloc] init] autorelease];
        cell.selectedBackgroundView = [[[UIImageView alloc] init] autorelease];
        cell.textLabel.numberOfLines=0;

    }
    else
    {
        Labelcompanyname = (UILabel *)[cell viewWithTag:BOTTOM_LABEL_TAG];
        Labeldistance = (UILabel *)[cell viewWithTag:TEXT_FIELD_TAG];   

    }

    PromotionObject *newObj1;
    newObj1=[totalArray objectAtIndex:indexPath.row];

    if(!newObj1.furtherURL){

        Labelcompanyname.text =[NSString stringWithFormat:@"%@", newObj1.companyname];
        Labeldistance.text =newObj1.distance;
    }
    else
    {
        Labelcompanyname.text =[NSString stringWithFormat:@"Load more results"];
        Labeldistance.text =@"";
    }



    NSURL *Imageurl = [NSURL URLWithString:[NSString stringWithFormat:@"%@", newObj1.locImage]];
    NSData *data = [NSData dataWithContentsOfURL:Imageurl];
    UIImage *img = [[[UIImage alloc] initWithData:data] autorelease];

    if(currentType == @"categorySearch"){

        cell.imageView.image = img;

    } else if(currentType == @"fullSearch") {

        cell.imageView.image = [UIImage imageNamed:@"newmap.png"];

    } else {

        cell.imageView.image = [UIImage imageNamed:@"business.png"];

    }


    cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;

    return cell;
}   

Any help will be really appreciated

Tom

Answer 1

You definitely shouldn't do anything that blocks the UI thread for significant time while loading cells. Eg NSData *data = [NSData dataWithContentsOfURL:Imageurl]; .

I recommend loading your images into the data source in the background and reload/update the table/cells when the data has been downloaded. Would also be good to implement a cache for your images so you don't have to download them again everytime the cell is loaded.

If you need help with asynchronous image loading, search for that. Lot's of stuff on SO.

Answer 2

I guess you got your answer yourself. Your image loading blocks your UI from finishing the current cell request. tableView:cellForRowAtIndexPath: can't return until your image is fetched. I suggest you replace your image by an activity indicator and start to fetch your image in background. You might want to take a look at Concurrency Programming Guide