Question

I encountered a problem of webview and I thin many people had met that.

In my app, I have an UITableview and each cell of the tableview is self-defined. In each cell a UIWebview is embedded. I need to display each cell’s content when I scroll my tableview. (webview’s loadsHTML and image_url is from an local array)

Problem is that the UIWebview in each cell loads a remote image url and when user scrolls so fast the table, the webview in the cell can not reac fast enough so the webview may display the repeated image for less than 1 second. (Since I use reusable cell and webview loads from image_url array, so that

image_url = [array_image_url objectAtIndex:[index row]];

For user experience, that is terrible to see the repeated images. I tries to figue it out but still can’t. Can anyone help me on this issue?

PS: If possible, I don’t want to cache image on disk

Answer 1

I have had a similar problem (I was displaying remote images) and used the UIScrollView delegate methods (UITableView inherits from UIScrollView) to handle when to update my images or not. You can do something similar to load content when the scrolling is stopped:

// UIScrollView Delegate Methods
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self loadImagesForOnscreenRows];
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self loadImagesForOnscreenRows];
}

EDIT – Forgot the method that actually loads the rows. This might help 🙂
Note – Some of this code is specific to my app, you will need to adapt to suit your data and web location of the image. Also – the setImageWithURL method is part of the AFNetworking library. If you haven’t checked out AFNetworking, it rocks. If you aren’t already using AFN and don’t need to, then I also added a class I wrote that uses blocks to async load web images.

- (void)loadImagesForOnscreenRows
{
    if ([self.phonebookData count] > 0)
    {
        NSArray *visiblePaths = [self.myTableView indexPathsForVisibleRows];
        for (NSIndexPath *indexPath in visiblePaths)
        {
            NSDictionary *selRow = [[self.persons valueForKey:[[[self.persons allKeys] sortedArrayUsingSelector:@selector(localizedCaseInsensitiveCompare:)] objectAtIndex:indexPath.section]] objectAtIndex:indexPath.row];

            PBCell *cell = (PBCell *)[self.myTableView cellForRowAtIndexPath:indexPath];

            if ([[selRow objectForKey:@"picFileName"] length] > 0) {           
                [cell.thumbnailImage setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"YourURLHere/%@",[selRow objectForKey:@"picFileName"]]] placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

            } else {
                cell.thumbnailImage.image = [UIImage imageNamed:@"defaultImage.png"];
            }
        }
    }
}

Alternative method instead of AFNetworking:

WebImageOperations.h:

//
//  WebImageOperations.h
//
//  Created by Larry Wilson on 11/11/11.
//  Copyright (c) 2011 Larry Wilson. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface WebImageOperations : NSObject {
}

+ (void)processImageDataWithURLString:(NSString *)urlString andBlock:(void (^)(NSData *imageData))processImage;

@end

WebImageOperations.m:

//
//  WebImageOperations.m
//
//  Created by Larry Wilson on 11/11/11.
//  Copyright (c) 2011 Larry Wilson. All rights reserved.
//

#import "WebImageOperations.h"
#import <QuartzCore/QuartzCore.h>

@implementation WebImageOperations

+ (void)processImageDataWithURLString:(NSString *)urlString andBlock:(void (^)(NSData *imageData))processImage
{
    NSURL *url = [NSURL URLWithString:urlString];

    dispatch_queue_t callerQueue = dispatch_get_current_queue();
    dispatch_queue_t downloadQueue = dispatch_queue_create("com.myappname.processimagedataqueue", NULL);
    dispatch_async(downloadQueue, ^{
        NSData * imageData = [NSData dataWithContentsOfURL:url];

        dispatch_async(callerQueue, ^{
            processImage(imageData);
        });
    });
    dispatch_release(downloadQueue);
}

@end