Chrome中的CSS延迟加载

2018-06-09 00:08:28

在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中。我的猜测是，Chrome在加载DOM之后加载CSS时，在某些情况下无法正确计算绝对或相对定位元素的位置。

我想为您提供HTML / CSS代码片段，但不幸的是，它隔离错误渲染的元素。所以相反，我问是否有人遇到类似的问题，可能会导致此行为。也许有一些关于如何解决这些问题的一般提示。

亲切的问候

Sutuma，

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

需要js，require-css插件

链接地址: http://www.djcxy.com/p/27113.html

上一篇: CSS Lazy Loading in Chrome

下一篇: Asynchronous TADOQuery's OnFetchComplete not synchonized to main thread