How to improve blending performance to make smooth scrolling?

[ermik]

Fast intro

I have 9 cells. All 9 cells contain bundle image. 7 bundle images have some kind of transparency (in file, not as a blending option in code) to load images from web underneath them. The scrolling problem affects the table view when both bundle and web images are loaded into arrays as UIImage objects.

If I disable drawing of web images scrolling is beautiful, when I disable image from bundle scrolling is pretty OK. But together you get what you don't want to have: bad user experience.

Implementation

I am using model in witch you have a custom UITableViewCell with one custom UIView set up as Cell's backgroundView.

Custom UIView contains two Cell-sized images (320x80 px). All elements are set to be Opaque and have 1.0 Alpha property, but one of images is partially 100% transparent.

I don't reuse Cells because I failed to make them loading different images. Cell's reused one-by-one up to 9 cells overall. So I have 9 reusable Cells in memory. Maybe that's the issue.

Cell initWithStyle:reuseIdentifier method part:

CGRect viewFrame = CGRectMake(0.0f, 0.0f, 320.0f, 80.0f);
    customCellView = [[CustomCellView alloc] initWithFrame:viewFrame];
    customCellView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self setBackgroundView:customCellView];

CustomCellView's initialization method:

- (id)initWithFrame:(CGRect)frame {
        if ((self = [super initWithFrame:frame])) {
            self.opaque = YES;
            self.backgroundColor = [UIColor UICustomColor];
        }
        return self;
    }

Images are being loaded to NSMutableArray as UIImage objects from PNG web-located files (40 - 80 kBytes) with UIImage's imageWithData: method (after asynchronous download).

They are being set in for visible cells in image-loading method and set from array they were saved to in UITableViewDelegate's method tableView:cellForRowAtIndexPath: and passed through UITableViewCell with custom method to UIView.

And then drawn in UIView's drawRect: overridden method:

- (void)drawRect:(CGRect)rect {
        CGRect contentRect = self.bounds; 
        if (!self.editing) {
            CGFloat boundsX = contentRect.origin.x;
            CGFloat boundsY = contentRect.origin.y;
            CGPoint point;
            point = CGPointMake(boundsX, boundsY);
            if (firstImage)  { [firstImage  drawInRect:contentRect blendMode:kCGBlendModeNormal alpha:1.0f]; }
            if (secondImage) { [secondImage drawInRect:contentRect blendMode:kCGBlendModeNormal alpha:1.0f]; }
        }
    }

----------
As you see images are being drawn with drawInRect:blendMode:alpha: method.
Problem
Well, when UITableView is being scrolled on the device you can notice (noticing is bad for user, very bad) downtime each time it loads new cell during scrolling.

Problem is more of blending problem, in code you see that the internet image is being drawn underneath the one already in bundle - not drawing the overlapping image made scrolling 70% faster.

Thoughts
Same implementation have no downtime when loading images from bundle. Should I save images to Application Sandbox and then use them from there. It sounds very bad because you should minimize read-write operations in mobile device application, because disk is slowly dying each time you read or write.

Or maybe I should store images as Core Graphics objects?

There some clues in fastest way to draw a screen buffer on the iphone - Stack Overflow) question. But I don't know how do do the custom drawing effectively.