Load images from bottom to top?

Question

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.

---

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)

Answer 1

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.

Answer 2

You can chop it up into slices in the server and load them separately. This is probably the only way to do this since you don't really have that much control over how contents are sent.

OR, just rotate the image in the server, load it normally, and display it with transform: rotate(-180deg).

Answer 3

I think technology like Spdy (which is a replacement) for Http makes such stuff possible..

And even Browsers like IE/Safari don't support it, because of the fact, that it's an Google technology

Look at this demo: https://www.youtube.com/watch?v=zN5MYf8FtN0&feature=youtube_gdata_player around minute 38

And yes, you would also need to split your image up in multiple parts for this... Like suggested in another comment here

Answer 4

LIVE DEMO

<img src="perfect.jpg" style="background-image:url(imperfect.jpg);">

The huge image will slowly appear over the placeholder by magic!

_{A bit of CSS for that img like background-size might also come handy. You got the idea.}