Chrome中的CSS延迟加载

Question

当在Chrome中延迟加载CSS时，我遇到了一些奇怪的定位问题，例如，一些元素(绝对的、相对的和级联的)的定位有时会有很大的差距。

基本上，我所做的是省略了通过link-Tag加载样式表的标准，而是放置了一个占位符span-Tag，以便稍后在body-Tag的末尾有一个简单的方法来检索URL。完全加载DOM后，我将span-Tag替换为生成的link-Tag，如下所示：

loadCSS: function()
{
    var el = jQuery('.is_css');
    if(!el.length) return;

    // Build link element
    var linkEl = jQuery('<link />').attr({
        media: 'all',
        type: 'text/css',
        rel: 'stylesheet',
        href: el.data('src')
    });

    el.replaceWith(linkEl);
}

我可以验证CSS是否完全加载，因为大多数元素看起来就像我直接将CSS嵌入到head-Tag中一样。我的猜测是，在加载DOM之后加载CSS时，Chrome在某些情况下无法正确计算绝对或相对定位元素的位置。

我想为您提供HTML / CSS片段，不幸的是，它超出了分离错误呈现的元素的范围。因此，我想问的是，是否有人遇到过类似的问题，会导致这种行为。也许有一些关于如何解决这些问题的一般提示。

亲切的问候

Answer 1

苏托玛

您尝试的方法可能会对性能产生很大的影响。原则上，CSS需要在html DOM呈现为有效之前加载。我猜你的html是在CSS加载之前呈现的。这是你可以尝试的选项: 1.加载html header标签中的所有css 2.重新加载您的html页面一个css是内容被下载。3.可以将html模板与(require js + require css plugin)结合使用，以实现延迟加载。

require js，require-css plugin