admin管理员组

文章数量:1290309

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: /

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: /

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

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/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/dfbPz/

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

• javascript
• html
• css
• browser
• image-loading

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked Mar 2, 2014 at 6:23 Tony DinhTony Dinh 6,72655 gold badges4141 silver badges5858 bronze badges 7

• I believe this is not possible. – dlock Commented Mar 2, 2014 at 6:25
• 1 You can first load the image and then show it when it's totally loaded using JavaScript, and if you are asking for an effect, that image should grow up from bottom than you can check my answer here – Mr. Alien Commented Mar 2, 2014 at 6:25
• 2 @Mr.Alien How much overhead and delay would that cause? preventing the user from seeing the image while really loading is a bad thing to do in terms of UX – dlock Commented Mar 2, 2014 at 6:26
• @deadlock Agreed, but since OP has a requirementm which is weird, the only suitable thing over here is to load the image first and then show the visitor.. if it was top to bottom, I would've suggested lazy load. – Mr. Alien Commented Mar 2, 2014 at 6:30
• @Mr.Alien: assume that is a big image that needs 60 seconds to load. Since the content is readable (from bottom to top) while the image is loading, I don't think there is anything "bad" in terms of UX. – Tony Dinh Commented Mar 2, 2014 at 6:36

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

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.

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).

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./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 ment here

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 e handy. You got the idea.}

If your goal is to make your content readable by user when your image loaded, you can use jquery lazy load image plugin, here a demo http://www.appelsiini/projects/lazyload/enabled.html

and you still can use jpeg image which have smaller size than bmp

Here is an alternate way that is Backwards-Compatible with unmon browsers. The flipside (aha) is increased page size and more prep work. You decide if the benefits outweigh the cons for your specific needs.

Step 1: Open the image in an image editor, flip it vertically, and upload it as a new file on your site.

Step 2: Code! Details below...

JSFiddle: http://jsfiddle/5uLZD/1/

Libraries: Modernizer, JQuery

HTML:

<!--Source below is the 'unflipped' image-->
<img src="http://i62.tinypic./wratsj.jpg" id="bottomtotop">

CSS:

.flipped {
    transform: rotate(-180deg);
}

JS:

if (Modernizr.csstransforms) {
    // Source below is the 'flipped' image.
    $("#bottomtotop").attr('src', 'http://i60.tinypic./2qajqqr.jpg').addClass('flipped');
}

You can alleviate the size issue by simplifying the Javascript and getting away from the frameworks (i.e, use "document.getElementById('bottomtotop')" in place of "$('bottomtotop')" and so forth), but that will take a significant amount of time and work.

本文标签： javascriptLoad images from bottom to topStack Overflow