Question

在下载真实图片之前，有没有办法在没有javascript的情况下为背景加载小图片？没有javascript因为我知道怎么用它。

我无法测试以下CSS3是否可行，因为它工作得太快：

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

如果tinypreload.jpg只是20k，而hugefile.jpg是300k - 这会完成任务吗？我假设两个下载都会同时开始而不是连续。

更新

使用Firefox的分析计算结果显示，首先加载较小的背景是不实际/不值得的。主要原因是连接时间。对于微小的图片，连接和下载内容的时间相同。对于值得的图像 - 建议不要将文件大小用于移动设备。

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

Answer 1

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

尝试从主css文件中加载小图片，然后在html页面的底部处添加<style></style>标记。内联样式将覆盖主样式，但由于它在代码中的位置而将最后加载。

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

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

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

了解您在加载订单之外尝试解决的问题会很有用，因为很难就此问题提供建议。

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