Css 在web上加载高分辨率图像是否有良好的非阻塞模式？

我有一个样式表（

hi dpi.css

），它包含一堆高分辨率资产，其中许多是内联的（数据URI）。但目前它阻止页面呈现

解决这个问题的最好办法是什么

---

也许在页面

加载
后写
标记？
将此脚本放在头部，它应该在不阻塞的情况下加载（）

如果它太大，你可能不得不把它分成几个部分，所以它可以并行下载。
在我进一步讨论之前，我不得不问这个问题，但是在CSS中有很多“高分辨率资产”真的有必要吗？我是说，也许只是我，但是

因此，我的建议是：在“原始样式表”中加载除数据uri以外的所有内容（这样页面呈现仍然可以获得图像大小和可能声明的其他内容），但在页面末尾有第二个文件表，其中包含所有实际的数据uri字面上是页面的最后一个元素

我不完全确定这会起作用，但它应该有助于缓解问题

原因是渲染引擎需要知道宽度、CSS框模型等信息才能正确渲染，但渲染图像往往需要更长的时间（这是我的理解），再加上我希望文件本身相当大，因此下载需要时间。因此，通过为页面提供所有CSS框模型等，它可以进行布局，并在最后加载图像

您可能需要阅读以下内容：

这是我的另一个选择：

在当前CSS中加载低分辨率图像（以便页面显示某些内容），并在页脚CSS中加载高分辨率图像，以便覆盖低分辨率图像。
这听起来是个好主意-您尝试过了吗？@antisanity Base64编码平均增加了33%的文件大小，但Gzip将其恢复，有时会比原来的低。@antisanity永远不会基于大的jpeg或其他东西，但我们有一些非常小的单色ImageOptim压碎PNG，每个PNG可能在300B到1KB之间。还有一些雪碧。@David不，我还没有。在做一系列x浏览器测试之前，想先看看其他人的想法！在文档开头加载CSS的目的是为页面提供呈现其他内容（位置和宽度等）所需的信息，并同意将其拆分为更多部分，但这违背了sprites的目的，不，它只包含图像，因此布局仍然可见，如果你的连接速度慢，只有图像会在以后加载。根据我在OP上的阅读，它似乎还包含除高分辨率DPI图像之外的其他内容。然而，如果他已经在做我建议的所有事情，那么是的，我会说你的是继我之后唯一的选择。hi-dpi.css中唯一的事情将是一些内联图像和对sprited图像文件的引用的组合，以及必要的
背景大小
声明。布局将不受影响。背景大小的delcaration是布局。不，我读到，包括样式表ANYWHERE会阻止javascript，因为脚本可能取决于要应用的某些样式：/实际上，我从来没有听说过。为什么javascript会阻止样式？Javascript在遇到时是内联解释的，不依赖于我遇到的任何引擎上的样式表。你还记得你在哪里读到的吗？
setTimeout(function () {
    var el = document.createElement('link'),
        sc = document.getElementsByTagName('script')[0];
    el.rel = 'stylesheet';
    el.href = 'hi-dpi.css';
    sc.parentNode.insertBefore(el, sc);
}, 30);