Question

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

基本上我正在做的是通过链接标签省略样式表的标准加载，而是放置一个占位符span-Tag，以便在以后轻松检索URL。身体标签。完全加载DOM后，我用生成的链接标记替换span-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

Sutuma，

您尝试的方法可能会对性能产生很大影响。作为一个原则，CSS需要在html DOM渲染之前加载才能生效。我的猜测是你的CSS在加载CSS之前呈现。您可以尝试以下选项： 1.在html标头标签中加载所有css 2.重新加载你的html页面一个css是内容下载。 3.您可以使用html模板（需要js + require css插件）进行延迟加载。

require js， require-css plugin

Chrome中的CSS延迟加载

1 个答案: