Javascript 加载contentn和css异步时闪烁/减慢css

因此，我正在通过ajax加载一个新页面和该页面的css文件

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

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

---

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

在加载CSS文件和应用样式时，如果不使用“布局”元素，则没有防弹的方法来检查，然后侦听它

CSS文件中的F.ex：

#layout{ height:1px }

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

var$layout=$（''）.attr（'id'，'layout'）.appendTo（'body'）；
var check=函数（）{
返回$layout.height（）==1；
}
如果（！check（））{
var=0，
间隔=10，
超时=5000；//要检查的最大毫秒数
setTimeout（函数计时器（）{
if（check（））{
log（'CSS-loaded'）；
$layout.remove（）；
}else if（尝试*间隔>=超时）{
log（'timeout'）；
}否则{
尝试++；
设置超时（计时器、间隔）；
}
}，间隔）；
}

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

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

---

如果你的页面需要在没有JS的情况下工作，你可能需要考虑它是如何影响事物的。

问题是，我正在为每个页面加载CSS文件，所以我需要编辑每一个CSS文件，这是相当多的工作，也不是很干净。没有其他方法吗？我现在实现了一种自动的方法。我想这是最好的解决办法。解决了我的问题。非常感谢。这不起作用，因为我需要在加载页面时运行js fns，而不是之前。它应该仍然可以工作-一旦加载页面并运行js，它将加载所有额外的CSS，从而导致站点显示。不，它需要在CSS下载完成后运行一些js。

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);
}