【问题标题】：Load images from bottom to top?从下到上加载图像？
【发布时间】：2014-03-02 06:23:02
【问题描述】：

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

假设我有一张非常长的图片，需要 60 秒才能加载。并且内容是从 bottom 到 top 可读的，我可以做些什么来让浏览器从 bottom 加载我的图像，以便用户可以在加载图像时阅读它？

谢谢，

这是一个与此问题相关的有趣的“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/

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

【问题讨论】：

我相信这是不可能的。
您可以先加载图像，然后在使用 JavaScript 完全加载时显示它，如果您要求效果，该图像应该从底部向上长大，而不是您可以查看我的答案 here
@Mr.Alien 这会导致多少开销和延迟？就用户体验而言，阻止用户在真正加载时看到图像是一件坏事
@deadlock 同意，但由于 OP 有一个奇怪的要求，这里唯一合适的事情是先加载图像然后显示访问者.. 如果它是从上到下的，我会'已经建议延迟加载。
@Mr.Alien：假设这是一张需要 60 秒加载的大图片。由于在加载图像时内容是可读的（从下到上），我认为在用户体验方面没有任何“坏”。

标签： javascript html css browser image-loading

【解决方案1】：

事实上，你可以。只需使用BMP 格式。这种格式是从底层存储的。

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

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

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

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

【讨论】：

我想指出 BMP 缺乏对 JPG 文件的显着压缩。如果 JPG 加载需要 60 秒，请确保测试 BMP 需要多长时间...
@aloisdg 你也可以点赞吗？ 千万不要这样说，你是帮帮忙，不是得分...
@Mr.Alien 如果我想得分？并不真地。我对SO很陌生。有时候，因为我的“业力”水平低，我什么也做不了。这里似乎很重要。您有关于此方面的良好做法的链接吗？
@DanielRippstein 我认为最好的方法是使用渐进式格式或添加一个小型加载程序。感谢您的评论。

【解决方案2】：

您可以在服务器中将其切成片并单独加载。这可能是执行此操作的唯一方法，因为您对内容的发送方式并没有太多控制权。

或者，在服务器中旋转图片，正常加载，用transform: rotate(-180deg)显示。

【讨论】：

我本来打算这样做，但它会导致 HTTP 请求增加
@Mr.Alien - 物理旋转它会做到这一点，虽然它有点......奇怪。
是的，但是无论如何切碎和一切都很奇怪，而且你不能保证哪个切碎的图像会首先加载..我不确定我们是否可以扭转延迟加载...就像每秒触发脚本注入从最后一个img标签开始逐个source
@Mr.Alien - 因为浏览器一次只能加载 2 个资源（或类似的资源），我们可以告诉浏览器何时加载下一组图像。
我们如何告诉浏览器应该首先加载哪个，它有点复杂，或者他可以做的是加载图像并通过使用 JS 提供 src 从底部更新 img 标签，这正是我在我之前的评论中说过......因为我使用切碎的图像来创建邮件，所以图像是随机加载的......

【解决方案3】：

我认为像 Spdy（它是一个替代品）这样的技术可以替代 Http 使这些东西成为可能......

甚至像 IE/Safari 这样的浏览器也不支持它，因为它是一项 Google 技术

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

是的，您还需要为此将图像分成多个部分...就像此处另一条评论中所建议的那样

【讨论】：

【解决方案4】：

LIVE DEMO

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

巨大的图像会神奇地慢慢出现在占位符上！

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

这是一种与不常见的浏览器向后兼容的替代方式。另一方面（啊哈）是增加了页面大小和更多的准备工作。根据您的特定需求，您决定利是否大于弊。

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

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

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

库：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')”等），但是这将花费大量时间和工作。

【讨论】：