3

问题的实质如下:

有一个页面,我需要修改浏览器扩展的内容,可以使用jQuery。

试过了$(document).ready(),但内容仍会显示一小段时间(FOUC)。我无法更改服务器上的页面样式。

我正在使用 kango 框架来构建扩展。

4

2 回答 2

1

仅使用 ECMAscript,您无法可靠地避免它。如果您等待DOMContentLoaded事件,您将没有任何机会,因为此时 DOM 几乎已被渲染和显示(这是您在短时间内看到的)。

最好的办法是尽快修改CSS。如果样式表定义在 DOM 被渲染之前被加载并且你会设置为

body {
    display: none;
}

你不会看到任何东西。你可以试试

<body>
    <script>
        document.body.style.display = 'none';
    </script>
    <!-- more html -->
</body>

如果这对您来说是任何可行/可用的解决方案。

于 2013-01-30T11:46:08.300 回答
0

我建议您结合使用 CSS 和 JavaScript。我在我正在构建的网站上使用 jQueryUI 时遇到了同样的问题,发现其中的许多解决方案会使没有 JavaScript 的人无法使用这些内容。

所以,这就是我所做的:

CSS:

.flash #wrapper {
     display: none;
}

<div id="wrapper">仅当它是flash该类的死者时才设置为隐藏。因此,为了防止它对那些没有 JavaScript 的人隐藏,我将flash类添加到<html>元素中。因此,只有在最终用户启用了 JavaScript 时才能将其物理隐藏,否则他们至少可以通过无样式的内容进行访问。

JavaScript:

$('html').addClass('flash');
$(document).ready(function() {
     /* Do all your stuff */

     /* When done show the wrapper with the content styled */
     $(#wrapper).show();
});

根据您的页面加载时间,您可能会得到一点闪光,但不会是无样式内容的闪光,这很丑陋。在我的情况下,我有一个 jQueryUI 菜单项,它会<ul>先闪烁普通元素,然后是 menuUI 项,并且我的<div>元素使用 jQuery 调整大小,以便每<div>列的高度相等,但它会首先闪烁不同的高度。这修复了它,同时仍然为非 JavaScript 浏览器提供可访问性。

于 2013-02-01T16:41:45.153 回答