加载内容和 css 异步时闪烁/慢 css答案

【问题标题】：Flicker/slow css when loading contentn and css async加载内容和 css 异步时闪烁/慢 css
【发布时间】：2012-10-21 13:30:56
【问题描述】：

所以我正在通过 ajax 为该页面加载一个新页面和一个 css 文件。

将所有 css 文件添加到页面后，我将页面的不透明度设置为 1，但它显示没有应用 css，并且在一秒钟左右后应用 css。这看起来很可怕，我该如何避免呢？

我没有找到一种干净的方法来检测 css 何时完全加载。

知道为什么会这样吗？我认为css可能还没有完全下载，但正如我所说，我不知道如何避免这种情况。

【问题讨论】：

标签： javascript css ajax asynchronous

【解决方案1】：

在不使用“布局”元素的情况下，AFAIK 无法检查何时加载 CSS 文件并应用样式，然后监听它。

您的 CSS 文件中的 F.ex：

#layout{ height:1px }

然后在你的javascript中（我在这里使用jQuery）：

var $layout = $('<div>').attr('id', 'layout').appendTo('body');
var check = function() {
    return $layout.height() == 1;
}

if ( !check() ) {
    var tries = 0,
        interval = 10,
        timeout = 5000; // max ms to check for
    setTimeout(function timer() {
        if ( check() ) {
            console.log('CSS loaded');
            $layout.remove();
        } else if (tries*interval >= timeout) {
            console.log('timeout');
        } else {
            tries++;
            setTimeout(timer, interval);
        }
    }, interval);
}

【讨论】：

问题是，我正在为每个页面加载 css 文件，所以我需要编辑每个 css 文件，这是相当多的工作，也不是那么干净。没有别的办法吗？
好吧，我现在实现了一种自动方法来执行此操作。我想这是最好的解决方案。解决了我的问题。非常感谢。

【解决方案2】：

不完全确定这将如何影响您的实施，但您可以：

在加载页面的标题中有一些默认 CSS，这将完全隐藏所有具有“闪烁”的内容。
在动态加载的 CSS 中，“撤消”此样式，以便显示所有内容。

如果您的页面需要在没有 JS 的情况下运行 - 您可能需要考虑这会如何影响事情。

【讨论】：

这不起作用，因为我需要在页面加载时而不是之前运行js fns。
它应该仍然可以工作 - 一旦你的页面被加载并且你的 JS 运行，它会加载所有额外的 CSS 导致网站显示。
不行，需要在css下载完成后运行一些js。