Chrome 扩展程序：如何摆脱 FOUC？

Question

The essence of the problem is as follows:问题的本质如下：

There is a page, I need to modify the contents of the browser extensions, you can use jQuery.有一个页面，我需要修改浏览器扩展的内容，可以使用jQuery。

Tried $(document).ready() , but then the contents are still displayed for a short period (FOUC).尝试$(document).ready() ，但内容仍会显示一小段时间（FOUC）。 I can not make changes to the page styles on the server.我无法更改服务器上的页面样式。

I'm using the kango framework to build the extension.我正在使用 kango 框架来构建扩展。

Answer 1

Using only ECMAscript, you can't reliably avoid it.仅使用 ECMAscript，您无法可靠地避免它。 You have like no shot if you wait for DOMContentLoaded event, because at that point the DOM is pretty much rendered and displayed (which is what you see for a short period).如果您等待DOMContentLoaded事件，您就没有机会，因为此时 DOM 几乎已渲染和显示（这是您在短时间内看到的）。

Your best shot would be to modify the CSS as soon as possible.最好的办法是尽快修改CSS 。 If the stylesheet definition gets loaded before the DOM gets rendered and you would have set like如果样式表定义在 DOM 被渲染之前被加载并且你会像这样设置

body {
    display: none;
}

you would not see anything.你不会看到任何东西。 You could try like你可以试试

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

if that is any viable / useable solution for you.如果这对您来说是任何可行/可用的解决方案。

Answer 2

I suggest you to use a combination of CSS and JavaScript.我建议你结合使用 CSS 和 JavaScript。 I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the content unavailable to those without JavaScript.我在我正在构建的网站上使用 jQueryUI 时遇到了同样的问题，并发现其中的许多解决方案会使那些没有 JavaScript 的人无法使用这些内容。

So, here is what I did:所以，这就是我所做的：

CSS: CSS：

.flash #wrapper {
     display: none;
}

This sets <div id="wrapper"> to hidden only if it is a decedent of the flash class.仅当<div id="wrapper">是flash类的继承者时，它才会将<div id="wrapper">为隐藏。 So, to keep it from being hidden from those without JavaScript I add the flash class to <html> element.因此，为了避免对那些没有 JavaScript 的人隐藏它，我将flash类添加到<html>元素。 So, it can only be physically hidden if an end-user has JavaScript enabled, otherwise they'll at least have access via the unstyled content.因此，如果最终用户启用了 JavaScript，它只能在物理上隐藏，否则他们至少可以通过无样式内容进行访问。

JavaScript: JavaScript：

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

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

Depending on your pages time to load you might get a little flash, but it won't be a flash of unstyled content, which is rather ugly.根据您的页面加载时间，您可能会出现一点闪光，但它不会是无样式内容的闪光，这是相当丑陋的。 In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal height, but it would flash the different heights first.在我的例子中，我有一个 jQueryUI 菜单项，它会先闪烁普通的<ul>元素，然后是 menuUI 项，并且我的<div>元素使用 jQuery 调整大小，以便每个<div>列的高度相等，但它会闪烁首先是不同的高度。 This fixed it while still giving accessibility to non-JavaScript browsers.这修复了它，同时仍然为非 JavaScript 浏览器提供可访问性。

Chrome 扩展程序：如何摆脱 FOUC？

问题描述

2 个解决方案

解决方案1
0 2013-01-30 11:46:08

解决方案2
0 已采纳 2013-02-01 16:41:45

Chrome 扩展程序：如何摆脱 FOUC？

问题描述

2 个解决方案

解决方案1 0 2013-01-30 11:46:08

解决方案2 0 已采纳 2013-02-01 16:41:45

解决方案1
0 2013-01-30 11:46:08

解决方案2
0 已采纳 2013-02-01 16:41:45