从下到上加载图像？

Question

是否可以从下到上加载图像？

假设我有一个很长很长的图片需要 60秒加载。内容可从底部到顶部读取，我可以做任何事情让浏览器从从底部到顶部加载我的图片，以便用户可以在图像加载时读取它？

谢谢，

这是一个与此问题相关的有趣的“ AAAAAND ITS GONE ”模因。

---

感谢所有回答我问题的人，以下是我总结的一些解决方案：

解决方案1 ​​ :( Derek's answer）

翻转图片，然后使用-webkit-transform: scaleY(-1);

显示

演示：http://jsfiddle.net/Nk6VP/

解决方案2 （aloisdg's answer）

使用BMP格式，这样浏览器会将图片“向上”加载，但BMP不是保存大图片的好文件类型，但它仍然是一个很好的尝试，因为你不需要在服务器端翻转图像。

演示：http://jsfiddle.net/dfbPz/

（请停用缓存以查看演示中的加载）

Answer 1

事实上，你可以。只需使用BMP格式。此格式从底部存储。

您可以找到向上加载here的图片示例。 （您必须单击“位图和.rle图像”按钮才能显示样本。）

来自fileformat.info的位图文件格式：

  

[关于文件头结构]如果Height是正数，则图像是一个“自下而上”的位图，其原点位于左下角。如果“高度”为负数，则图像为“自上而下”位图，其原点位于左上角。

您可以在topic in SO或this one找到更多信息。

Answer 2

我认为Http这样的技术像Spdy（它是替代品）可以让这些东西变得可能......

甚至像IE / Safari这样的浏览器都不支持它， 因为这是一个谷歌技术

看看这个演示： https://www.youtube.com/watch?v=zN5MYf8FtN0&feature=youtube_gdata_player 大约38分钟

是的，你还需要将你的图像分成多个部分...就像在另一个评论中提到的那样

Answer 3

您可以将其切成服务器中的切片并单独加载。这可能是实现这一目标的唯一方法，因为您对内容的发送方式并没有那么多的控制。

或者，只需旋转服务器中的图像，正常加载，然后使用transform: rotate(-180deg)显示。

Answer 4

<强> LIVE DEMO

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

巨大的图像将通过魔法缓慢显示在占位符上！

_{像img这样background-size的一些CSS也可能派上用场。你明白了。}

Answer 5

如果你的目标是在加载图片时让用户可以阅读你的内容，你可以使用jquery lazy load image插件，这里是一个演示http://www.appelsiini.net/projects/lazyload/enabled.html

你仍然可以使用尺寸小于bmp的jpeg图像

Answer 6

这是一种与非常见浏览器向后兼容的替代方法。另一面（aha）增加了页面尺寸和准备工作。您可以根据自己的特定需求确定收益是否超过利弊。

步骤1：在图像编辑器中打开图像，垂直翻转图像，然后将其作为新文件上传到您的网站上。

第2步：代码！详情如下......

JSFiddle：http://jsfiddle.net/5uLZD/1/

Libraries：Modernizer，JQuery

HTML：

<!--Source below is the 'unflipped' image-->
<img src="http://i62.tinypic.com/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.com/2qajqqr.jpg').addClass('flipped');
}

您可以通过简化Javascript并远离框架来缓解大小问题（即，使用“document.getElementById（'bottomtotop'）”代替“$（'bottomtotop'）”等等，但是这需要花费大量的时间和精力。