Progressive Image Rendering, loading image pixel by pixel & updating imageview in imageLoader

Question

I am working on an application where i need to load the server images in list. But the way of displaying images is bit different. I need to display image as it gets downloaded i.e. pixel by pixel. Initially the image sets as blur image than as it gets downloaded, its gets more sharper and results into the original image. If you want to see what i am talking about than you can refer to the below link:

Progressive Image Rendering

In this you can see the demo of the superior PNG style two-dimensional interlaced rendering(the second one). I goggled a lot but did not find any relevant answer to my query.

Any sort of help would be appreciable.

Thanks in advance.

Pintsize

Answer 1

If you use Glide, the library recommended by Google for loading images in Android, you can achieve this kind of behavior with .thumbnail this receives the fraction of the resolution you'll like your image to show while the full resolution finishes loading.

Glide.with( context )
         .load( "image url" )
         .thumbnail( 0.1f ) //rate of the full resoultion to show while loading
         into( imageView ); //ImageView where you want to display the image

Here is a more extensive explanation of the library and the thumbnails: https://futurestud.io/blog/glide-thumbnails

Basia

The thumbnail option in Glide doesn't do progressive JPEG streaming. It downloads the entire image and then renders it as a fraction of its resolution. As far as I know, the only library that does this is Fresco. – Porphyrin

Answer 2

Try Facebook's Freso project: http://frescolib.org/#streaming

Bookcraft