Javascript 从下到上加载图像？

是否可以从下至上加载图像

假设我有一个很长的图像，需要60秒才能加载。而且内容可以从底部读取到顶部，我可以做些什么让浏览器从底部到顶部加载我的图像，这样用户就可以在加载图像时读取图像了吗

谢谢,

这是一个与这个问题相关的有趣的“AAAAA及其过去”模因

---

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

解决方案1：（） 翻转图像，然后使用

-webkit transform:scaleY（-1）显示图像

演示：

解决方案2（）
使用
BMP
格式，这样浏览器将“向上”加载图像，但
BMP
不是保存大型图像的好文件类型，但这仍然是一个很好的尝试，因为您不需要在服务器端翻转图像

演示：

（请禁用缓存以查看演示中的加载情况）
我认为像Spdy（Http的替代品）这样的技术使这些东西成为可能

甚至IE/Safari这样的浏览器也不支持它，
因为事实上，这是谷歌的技术

请看这个演示：
大约38分钟

是的，你还需要将你的图像分割成多个部分来完成这个。。。就像在这里的另一条评论中建议的那样
您可以在服务器中将其切碎成片，然后分别加载。这可能是实现这一点的唯一方法，因为您对内容的发送方式没有太多控制权

或者，只需在服务器中旋转图像，正常加载图像，并使用
变换：旋转（-180度）

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



巨大的图像将通过魔法慢慢出现在占位符上

为
img
添加一点CSS，比如
background size
，可能也很方便。你知道了。事实上，你可以。只需使用
BMP
格式。此格式从底部存储

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

从位图文件格式：

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

您可以找到有关此或的更多信息。
这里有一种向后兼容不常见浏览器的替代方法。另一面（aha）是增加页面大小和进行更多准备工作。您可以根据自己的具体需要决定其利大于弊

步骤1：在图像编辑器中打开图像，垂直翻转图像，并将其作为新文件上载到您的站点

步骤2：代码！详细信息如下

JSFiddle：

库：Modernizer，JQuery

HTML:

JS:

您可以通过简化Javascript并远离框架来缓解大小问题（即，使用“document.getElementById（'bottomtotop'）”代替“$（'bottomtotop'）”等等），但这将花费大量的时间和工作。
如果您的目标是在加载图像时让用户能够阅读您的内容，您可以使用jquery lazy load image插件，这里是一个演示

你仍然可以使用比bmp小的jpeg图像，我认为这是不可能的。你可以先加载图像，然后在完全加载JavaScript时显示，如果你想获得效果，那么图像应该从底部开始生长，而不是检查我的答案@Mr.Alien，这会导致多少开销和延迟防止用户在真正加载时看到图像是一件不好的事情UX@deadlock同意，但由于OP有一个奇怪的要求，这里唯一合适的做法是先加载图像，然后向访问者显示..如果是从上到下，我会建议延迟加载。@Mr.Alien:假设这是一个大图像这需要60秒才能加载。因为图像加载时内容是可读的（从下到上），所以我不认为有什么“不好”“在用户体验方面，我本打算提出这个建议，但这将导致HTTP的增加requests@Mr.Alien-物理旋转就可以了，虽然有点。。。奇怪。是的，但切碎和所有的一切都是奇怪的，而且你也不能保证哪个切碎的图像将首先加载。。我不确定我们是否可以扭转惰性负载。。。像fire脚本一样，从最后一个
img
tag@Mr.Alien-由于浏览器一次只能加载2个资源（或类似的资源），我们可以告诉浏览器何时加载下一组图像。无论我们如何告诉浏览器应该先加载哪个，这都有点复杂，或者他可以通过使用JS提供src，从底部加载图像并更新img标记，就像我在之前的评论中所说的那样。。。。因为我使用切碎的图像来创建邮件，所以图像是随机加载的……我想指出，BMP缺少JPG文件的显著压缩。如果JPG需要60秒才能加载，请确保您测试BMP需要多长时间…@ALOISG您也可以升级它吗？千万别这么说，你是在帮我，不是为了得分…。@Mr.Alien如果我想得分？不是真的。我是个新手。有时候，我不能做一些事情，因为我的“业力”很低。这里似乎很重要。你有关于这方面良好实践的链接吗？@DanielRippstein我认为最好的方法是使用渐进式格式或添加一个小加载程序。谢谢你的评论。
<!--Source below is the 'unflipped' image-->
<img src="http://i62.tinypic.com/wratsj.jpg" id="bottomtotop">

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

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