Search code examples
javascripthtmlcssbrowserimage-loading

Load images from bottom to top?

Is it possible to load images from bottom to top?

Assume that I have a long, very long image that needs 60 seconds to load. And the content is readable from bottom to top, can I do anything to make the browsers to load my image from bottom to top so users can read it while the image is loading?

Thank you,

This is a funny "AAAAAND ITS GONE" meme related to this question.

AAAAAAAND ITS GONE

Thanks to all you guys who have answered my question, here are some solutions I have summary:

Solution 1: (Derek's answer)

Flip the image and then display it with -webkit-transform: scaleY(-1);

Demo: http://jsfiddle.net/Nk6VP/

Solution 2 (aloisdg's answer)

Use BMP format, this way browser will load the image "upwards" but BMP is not a good file type to save big images, but its still a good try since you doesn't need to flip the image at server-side.

Demo: http://jsfiddle.net/dfbPz/

(Please disable cache to see the loading in the demo)

Solution

  • In fact, you can. Just use BMP format. This format is stored from the bottom.

    You can find a sample of image loading upward here. (You have to click on the button "Bitmap and .rle Images to display the sample.)

    From the Bitmap file format at fileformat.info:

    [Regarding file header structure] If Height is a positive number, then the image is a "bottom-up" bitmap with the origin in the lower-left corner. If Height is a negative number, then the image is a "top-down" bitmap with the origin in the upper-left corner.

    You can find more info on this topic in SO or this one.