Is it possible to have access to the image Height when the resource state is Loading or Error?
Alaksion opened this issue · comments
I'm developing a feature that contains a list of images with variable height and I'd like to display a loading/error state that has the same size of the downloaded image, is it possible to have access to this information?
Right now, no that would not be possible. If you know of a way to load the image size before downloading all image bytes, I could look into it.
Browsers do this when you open an image URL, the tab name shows the width and height before the image is fully loaded.
I'm not sure how exactly, but maybe it gets that info from the first few bytes of the image? PNG has an "IHDR" header in the very first few bytes, containing the width and height. I'd guess that some servers also return the image dimensions in the headers? Unsure about that though.
This still won't solve the issue if there's a connectivity error (and no bytes were downloaded at all), but it can result in fewer layout shifts as images load.
Another solution ("compromise") I could think of is taking control of the download progress, and never showing any UI at all until the server has actually responded with the first few bytes. E.g. in a list, show a loading indicator at the very bottom instead of a loading state for each image, and only add images when you have the minimal size information about them. Still a very hacky way to deal with it, and I'm not sure how would this integrate with Kamel (to benefit from the caching etc...).
However, if you have control over the server side of things, and the image "URL list" itself is also downloaded before everything, you could attach extra metadata in the list itself so you already know beforehand what the width and height are going to be. It could be either in some JSON/XML/YAML format or as part of the URL of every image, but again, only as long as you control the server part.