Delayed UIImageView Rendering in UITableView

Question

Ok, I've got a UITableView with custom UITableViewCells that each contain a UIImageView whose images are being downloaded asynchronously via an NSURLConnection. All pretty standard stuff...

The issue is, when the table scrolls, the new images are downloaded in the background correctly but not RENDERED until the table stops moving.

How do I get the table to render it's content even when it's moving? Thanks.

-- UPDATE --

After a closer look, I'm finding that the NSURLConnection delegate methods aren't firing until the table stops scrolling. Not sure why. Any help would be great.

Answer 1

The reason the connection delegate messages aren't firing until you stop scrolling is because during scrolling, the run loop is in UITrackingRunLoopMode. By default, NSURLConnection schedules itself in NSDefaultRunLoopMode only, so you don't get any messages while scrolling.

Here's how to schedule the connection in the "common" modes, which includes UITrackingRunLoopMode:

NSURLRequest *request = ...
NSURLConnection *connection = [[NSURLConnection alloc]
                               initWithRequest:request
                               delegate:self
                               startImmediately:NO];
[connection scheduleInRunLoop:[NSRunLoop currentRunLoop]
            forMode:NSRunLoopCommonModes];
[connection start];

Note that you have to specify startImmediately:NO in the initializer, which seems to run counter to Apple's documentation that suggests you can change run loop modes even after it has started.

Answer 2

You should read up on NSRunLoop. I suspect that, during scrolling, the run loop is running in NSEventTrackingRunLoopMode, and the NSURLConnection isn't included in that mode. You could probably get around this by calling NSURLConnection's scheduleInRunLoop:forMode:, so that download can happen during scrolling.

This will probably affect scrolling performance, which is probably the reason for the separate run loop mode in the first place. But try it out and see how it feels!

Answer 3

If you wrap your image download & update in an NSOperation, the updates will happen as the table-view scrolls.

Another benefit of NSOperation, is you can cancel the operation as the cell glides off-screen. It will feel a lot more responsive to the user.. especially if they scroll a long list quickly. The Apple tech-talk this year encouraged this technique.

If your lists aren't that long, or you would prefer them to continue loading, you can manipulate the NSOperation priorities instead.

Answer 4

First...your connection probably isn't even starting until it get's to the mainRunLoop and that's where the scrolling animation is also being processed.

I ran into the same problem and fixed it by telling the connections for the images to start immediately upon creation.

    NSURLConnection *connection = [[NSURLConnection alloc] initWithRequest:wrapper.request delegate:wrapper];

    [connection start];

In the completion routine where you receive the image and set the cell.imageView.image to the received image, you should check to see if this cell belongs to one of the cells currently being displayed in the table...and if so call [tableView reloadData].

    NSInteger itemIndex = theIndexInTheRowDataOfTheCellYouStuffedTheImage

    NSArray *indicies = [_tableView indexPathsForVisibleRows];
    NSUInteger rows = indicies.count;

    if (rows > 0 &&
        itemIndex >= ((NSIndexPath *)[indicies objectAtIndex:0]).row &&
        itemIndex <= ((NSIndexPath *)[indicies objectAtIndex:rows - 1]).row)
    {       
        [_tableView reloadData];
    }