How to set size of imageView before downloading

Question

In my android app, I have implemented imageview using Fresco, because the images were GIFs. and the images were given from the server made with node.js

There are instagram-like timeline but the images are GIFs. and the problem is that before downloading the photo, the imageviews are set to default size like 200x200. and then after the image is downloaded, it becomes the actual size. I want the imageview to be in the size of the actual size, even before it is loaded. I have seen that most of the commercial apps, the size of the imageview is already set to the original size, even before it is loaded.

I want to know what is the best way to implement this.

I was thinking that when the server is sending the client the descriptions of the post, like image url, title, content, number of likes, should it send the dimensions as well? like

{elements:[{
             url:"http://blah.com/image.jpg",
             title:"this is the title",
             photo_width:300,
             photo_height:500,
             and other stuffs
           },
           {another element},
           {so on}]
}

or is does the Fresco have a way of solving this that i did not know?

Answer 1

I don't think Fresco covered this use-case.

Any major web browser such as Chrome can get the width and height before the image is actually loaded, because as soon as the browser loads the file header, it then has width and height of the image.

But Fresco's ControllerListener doesn't seem to have a beforeDownload(@Nullable ImageInfo imageInfo), so you have to wait for the image to be fully loaded to get the actual size.

Even the lib 'image-size' you referred to claims that you don't need to download the entire image to get the size, I don't see why Fresco can't do it. Maybe we should make a suggestion to the Fresco team.

Edit:
Hey, I found this awesome lib searching github: https://github.com/qstumn/FastImageSize

It allows you to get the image size without downloading the whole file, and it's easy to use

int[] imageSize;
//sync
imageSize = FastImageSize.with(url).get();

//async
FastImageSize.with(url).get(new FastImageSize.ImageSizeCallback() { 

       @Override   
       public void onSizeReady(int[] size) { 
            imageSize = size;
       }
});

int imageWidth = imageSize[0];
int imageHeight = imageSize[1];