How do I display a progressive JPEG in an UIImageView while it is being downloaded?

Question

Downloading an image from the net and showing it in an UIImageView is fairly easy. However, this requires the image to be completely downloaded before it is shown to the user, completely defeating progressive JPEG (and PNG) images.

How can I render the partially downloaded images while the transfer is being done? I would imagine the SDK to have some callback function which would update the image, but I can't find such a function. Is it possible at all with the current iOS SDK?

Answer 1

Did you try to render the UIImage partially as didReceiveData gets called … ? Something like …

-(void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
    //TODO: add some error handling in case the image could not be created
    UIImage *img=[UIImage imageWithData:data];
    if (img) {
        self.imageView.image=img;
    }
}

Answer 2

I know this post has about 1 year, but just in case anyone is looking for it, there is a project called NYXImagesKit that does what you are looking for.

It has a class named NYXProgressiveImageView that is a subclass of UIImageView.

All you have to do is:

NYXProgressiveImageView * imgv = [[NYXProgressiveImageView alloc] init];
imgv.frame = CGRectMake(0, 0, 320, 480);
[imgv loadImageAtURL:[NSURL URLWithString:@"http://yourimage"]];
[self.view addSubview:imgv];
[imgv release];

Also, a good option is to save your images as interlaced so that it loads with low quality and improve with the download. If the image is not interlaced it is loaded from top to bottom.

Answer 3

There is now a small open-source library on top of libjpeg-turbo which allows decoding and displaying progressive JPEGs easily:

let imageView = CCBufferedImageView(frame: ...)
if let url = NSURL(string: "http://example.com/yolo.jpg") {
    imageView.load(url)
}

see https://github.com/contentful-labs/Concorde