3

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

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

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

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

4

2 回答 2

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);
}
于 2012-10-21T13:53:14.480 回答
0

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

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

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

于 2012-10-21T14:10:16.097 回答