White flash when setImageWithUrl displays a cached image

Question

Using AFNetworking 2.0's method setImageWithUrl, I set an image in an imageView located in a UITableViewCell. It works fine when the image displayed is first downloaded and then set. If, however, the image is available locally (has been cached) when it's set, there's a quick white flash before it is displayed.

Do you know how to avoid this?

Steps to reproduce:

Set image (image will be cached)
Close application
Start application
Set (the now cached) image

Code for setting the image:

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

    myCell *cell = (myCell *)[tableView dequeueReusableCellWithIdentifier:@"imageCell"];

    [cell.myImageView setImageWithURLRequest:[NSURLRequest requestWithURL:myImageUrl] placeholderImage:nil success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
        cell.myImageView.image = image;

    } failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
        NSLog(@"Failed");
    }];

    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;  
}

score 8 · Accepted Answer · edited May 23 '17 at 12:14

If anyone's bumping into the same issue, here's how I solved it:

In the success block, replace

cell.myImageView.image = image;

with

if (request) {
    [UIView transitionWithView:cell.myImageView
                      duration:0.8f
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{[cell.myImageView setImage:image];}
                    completion:NULL];
}else{
    [cell.myImageView setImageWithURL:myImageURL];
}

Voilà, no more ugly flashes!

Credits to this answer for leading me to the right track.

score 0 · Answer 2 · answered Mar 27 '14 at 12:16

It seems that your issue is related to cell reusing rather to the caching issue.

When your cells are reused (when scrolling the UITableView or reopening the app) they hold a reference to the old image. And when you pass nil to the placeholderImage parameter, AFNetworking does not resets your image. Here is the source code. So the new image is set in a success block. But this block may be called after a slight network delay making your image to flash. By the way, you may omit the success block so the AFNetworking will set the image by itself.

If you don't have a placeHolder image you should set the myImageView.image to nil before trying to set a new one asynchronously.

In addition you should check if the dequeueReusableCellWithIdentifier: method returns a cell, and if not, create a new one. This may happen when the UITableView is created for the first time.

Here is an example:

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

    myCell *cell = (myCell *)[tableView dequeueReusableCellWithIdentifier:@"imageCell"];

    // Check if reused cell was returned.
    // If not create a new one, otherwise, reset the state of the reused cell
    if (!cell) {
        cell = [[myCell alloc] init];
    } else {
        cell.myImageView.image = nil;
    }

    [cell.myImageView
        setImageWithURLRequest:[NSURLRequest requestWithURL:myImageUrl]
        placeholderImage:nil
        success:nil
        failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
            NSLog(@"Failed");
        }];

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    return cell;  
}

Thank you for such an extensive and quick reply @smnh. Unfortunately, that didn't do the trick. I replaced my code with yours, but the flash still occurs. You might have pointed me in the right direction, though. — Leverin, Mar 27 '14 at 13:21
I tried setting a placeholderimage to see if the behaviour would change. Still a "flash"; the placeholder image is displayed for 0.X seconds before the cached image is is displayed. I guess I could try adding a fade effect. — Leverin, Mar 27 '14 at 14:02
Can it be that your `myImageView.backgroundColor` is set to white color? Or maybe there is a white view below the myImageView that flashes while the image is not set? — smnh, Mar 27 '14 at 17:56
my background is indeed white. If curious of my solution/workaround, see my own answer. Thanks for your help! — Leverin, Mar 28 '14 at 09:28
You can set the background to be transparent `[UIColor clearColor]`, then the flash should not happen anymore. Another reason for that flash to occur is JPEG decompression delay, given that you are using white background and JPEG images for the `cellImage`. — smnh, Mar 28 '14 at 20:21

score 0 · Answer 3 · answered May 18 '20 at 06:49

You need a function like this:

BOOL ImageDataHasPNGPreffix(NSData *data) {
NSUInteger pngSignatureLength = [kPNGSignatureData length];
if ([data length] >= pngSignatureLength) {
    if ([[data subdataWithRange:NSMakeRange(0, pngSignatureLength)] isEqualToData:kPNGSignatureData]) {
        return YES;
    }
}

return NO;
}

then when you save your data, you need to choose the right way to cache

//Saving data
if ([imageData length] >= [kPNGSignatureData length]) {
    imageIsPng = ImageDataHasPNGPreffix(imageData);
}

if (imageIsPng) {
    data = UIImagePNGRepresentation(image);
}
else {
    data = UIImageJPEGRepresentation(image, (CGFloat)1.0);
}

White flash when setImageWithUrl displays a cached image

3 Answers3