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 回答