问题的实质如下:
有一个页面,我需要修改浏览器扩展的内容,你可以使用jQuery。
尝试$(document).ready()
,但内容仍会显示一段时间(FOUC)。我无法更改服务器上的页面样式。
我正在使用kango框架来构建扩展。
答案 0 :(得分:0)
仅使用ECMAscript,您无法可靠地避免它。如果等待DOMContentLoaded
事件,你就不喜欢拍摄,因为在那时,DOM几乎被渲染和显示(这是你在短时间内看到的)。
您最好的选择是尽快修改 CSS 。如果
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>
列等于高,但它会首先闪现不同的高度。这修复了它,同时仍然可以访问没有启用脚本的浏览器。