Question

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

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

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

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

Answer 1

AFAIK没有防弹方式来检查何时加载CSS文件并且在不使用“layout”元素的情况下应用了样式，然后收听它。

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

Answer 2

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

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

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

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

2 个答案: