css - 加载大图片时的临时背景图片？

Question

有没有办法在没有javascript的情况下在下载真实图像之前加载一个小图像作为背景？没有 javascript，因为我知道如何使用它。

我无法测试以下 CSS3 是否有效，因为它运行得太快了:

body { 
  background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}

如果 tinypreload.jpg 仅为 20k，而 hugefile.jpg 为 300k - 这是否可以完成任务？我假设这两个下载将同时开始而不是连续进行。

更新

使用 Firefox 的分析对结果进行计时表明，首先加载较小的背景是不切实际的/不值得的。主要原因是连接时间。对于小图片，连接时间与下载内容的时间相同。对于值得这样做的图像——不建议将文件大小用于移动设备。

如果您仍想实现此效果 - 将所有“必要”图像合并到一个文件中，并将它们显示为具有正确偏移的裁剪背景。通过 javascript 加载高分辨率图像，然后更新内容。

Answer 1

您可以利用 css 加载顺序和覆盖来实现此结果。

尝试从您的主 css 文件加载小图像，然后放置一个 <style></style>标记在 html 页面的底部。内联样式将覆盖主样式，但会最后加载，因为它在代码中的位置。

虽然差异是毫秒，所以它可能太快了。它也是 hacky，会导致无效但有效的代码。不过值得一试。

如果您正在尝试解决移动问题，请查看 context specific images 上的这篇文章因为这可能是一种更有效的方法。

这篇文章 CSS3 multiple backgrounds也可能有帮助，因为您可以利用堆叠顺序来实现您想要的结果

It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.

正如我在评论中所说，您可以使用 firefox 的 firebug 中的“网络”选项卡(在 chrome 中称为时间轴)来查看页面上的实际加载顺序 - 您甚至可以过滤它(在 firefox 上)仅用于 CSS 或仅图像 - 这将使您能够进行测试。