Chrome扩展:如何摆脱FOUC?

时间:2013-01-30 11:39:26

标签: javascript google-chrome-extension

问题的实质如下:

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

body {
    display: none;
}
你不会看到任何东西。你可以试试

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

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

答案 1 :(得分:0)

我可能会建议您使用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>列等于高,但它会首先闪现不同的高度。这修复了它,同时仍然可以访问没有启用脚本的浏览器。