问题的实质如下:
有一个页面,我需要修改浏览器扩展的内容,可以使用jQuery。
试过了$(document).ready()
,但内容仍会显示一小段时间(FOUC)。我无法更改服务器上的页面样式。
我正在使用 kango 框架来构建扩展。
问题的实质如下:
有一个页面,我需要修改浏览器扩展的内容,可以使用jQuery。
试过了$(document).ready()
,但内容仍会显示一小段时间(FOUC)。我无法更改服务器上的页面样式。
我正在使用 kango 框架来构建扩展。
仅使用 ECMAscript,您无法可靠地避免它。如果您等待DOMContentLoaded
事件,您将没有任何机会,因为此时 DOM 几乎已被渲染和显示(这是您在短时间内看到的)。
最好的办法是尽快修改CSS。如果样式表定义在 DOM 被渲染之前被加载并且你会设置为
body {
display: none;
}
你不会看到任何东西。你可以试试
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>
如果这对您来说是任何可行/可用的解决方案。
我建议您结合使用 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 浏览器提供可访问性。