我已尽最大努力成为 Javascript/Ajax 技术的纯粹主义者，确保所有 Ajax-y 行为都是对基本功能的增强，而当禁用 Javascript 时，网站也能正常运行。但是，这会导致一些问题。
在某些情况下，只有在浏览器中启用了 Javascript 时，DOM 节点才应该可见。在其他情况下，它应该只在禁用时可见。以表单上的提交按钮为例，该按钮有一个带有自动提交的 onchange 处理程序的下拉列表(使用 JQuery 的表单插件):
<form method="post" action=".">
<label for="id_state">State:</label>
<select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<input class="with_js_disabled" type="submit" value="OK" />
</form>
和 Javascript:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
启用 Javascript 时，不需要提交按钮(由于 onchange 处理程序)。但是，JQuery 的 $(document).ready 函数(以及更直接的 document.onload)仅在页面完全加载和呈现后调用 - 因此，提交按钮最初显示，并且在 Javascript 加载时出现“闪烁”执行并将节点的显示设置为“无”。
我已经接受这是开展业务的成本，但还没有找到解决方法。但是有没有一种我不知道的技术可以最大限度地减少影响，甚至完全消除它？
编辑:
<noscript>下面很多人提到的解决方案似乎很有希望，但在 Safari 上对我不起作用。然而，Prestaul 的第二个建议非常有效:
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
然后可以直接使用 CSS 来设置样式:
body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }
这第二行仅供引用，可以(并且应该)删除以避免您的元素不应该显示的情况: block 。同样，对于其他显示样式，您可能需要第三行的不同变体。但这个解决方案非常干净，IMO，并且在我的测试中完全消除了闪烁效果。
最佳答案
如何组合其中一些解决方案:
<style type="text/javascript">
.only-without-script {
display: none;
}
</style>
<noscript>
<style type="text/javascript">
.only-with-script {
display: none;
}
.only-without-script {
display: block;
}
</style>
</noscript>
或者我更喜欢在正文中添加一个类(将 <script> 标记放在正文顶部并且不使用 .ready 事件):
<head>
<style type="text/javascript">
body.has-script .something-not-ajaxy {
display: none;
}
input.ajaxy-submit {
display: none;
}
body.has-script input.ajaxy-submit {
display: inline;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.className += ' has-script';
</script>
<!-- the rest of your page -->
</body>
关于javascript - 如何消除渲染后 "flicker"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/463670/