Question

问题的实质如下：

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

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

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

Answer 1

仅使用ECMAscript，您无法可靠地避免它。如果等待DOMContentLoaded事件，你就不喜欢拍摄，因为在那时，DOM几乎被渲染和显示（这是你在短时间内看到的）。

您最好的选择是尽快修改 CSS 。如果样式表定义在呈现DOM之前加载，并且您将设置为

body {
    display: none;
}

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

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

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

Answer 2

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

所以这就是我所做的：

CSS：

.flash #wrapper {
     display: none;
}

这样做只会将<div id="wrapper">设置为隐藏，只要它是类flash的后代。因此，为了防止它被那些没有javascript的人隐藏，我将类flash添加到<html>元素。因此，只有在最终用户启用了JavaScript的情况下才能进行物理隐藏，否则他们至少可以通过未经停止的内容进行访问。

JavaScript的：

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

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

根据您的网页加载时间的不同，您可能会获得一些闪光，但它不会是一段非固定内容的闪光，相当难看。在我的情况下，我有一个jQueryUI菜单项，它将首先刷新普通<ul>元素然后刷新menuUI项，并使用jQuery调整我的<div>元素的大小，以便每个<div>列等于高，但它会首先闪现不同的高度。这修复了它，同时仍然可以访问没有启用脚本的浏览器。

Chrome扩展：如何摆脱FOUC？

2 个答案: