如何消除后期渲染＆QUOT;忽悠＆QUOT;？ [英] How to eliminate post-render "flicker"?
问题描述
我已经尽我所能，用我的使用使用Javascript / Ajax技术纯粹主义者，确保所有的Ajax-Y的行为是基本功能的增强，而网站也是全功能的JavaScript时被禁用。然而，这会导致一些问题。
I've tried my best to be a purist with my usage of Javascript/Ajax techniques, ensuring that all Ajax-y behavior is an enhancement of base functionality, while the site is also fully functional when Javascript is disabled. However, this causes some problems.
在一些情况下，DOM节点应该仅是可见时的Javascript在浏览器中被使能。在其他情况下，禁用时，它应该仅是可见的。就拿一个提交，有一个下拉与自动的提交（使用jQuery的形式插件）是一个onchange处理程序的窗体上按钮：
In some cases, a DOM node should only be visible when Javascript is enabled in the browser. In other cases, it should only be visible when disabled. Take for instance a submit button on a form that has a drop down with an onchange handler that auto-submits (using JQuery's form plugin):
<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的：
and the Javascript:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
启用JavaScript时，提交不需要按钮（由于onChange处理）。然而，jQuery的$（document）.ready函数（和更直接的document.onload）只调用后，页面已经完全加载和渲染 - 因此，提交最初显示按钮和一个闪发生时，Javascript是执行，并且该节点的显示设定为无。
When Javascript is enabled, the submit button is not required (due to the onchange handler). However, JQuery's $(document).ready function (and the more direct document.onload) is only called after the page has been fully loaded and rendered - hence, the submit button is initially displayed and a "flash" occurs when the Javascript is executed and the node's display is set to "none".
我把这些话当作做生意的成本，还没有找到办法解决它。但有一个技术，我不知道，这将影响降到最低，甚至完全消除它？
I've accepted this as the cost of doing business, and haven't found a way around it. But is there a technique I'm not aware of that will minimize the effect, or even outright eliminate it?
编辑：
在＆LT; NOSCRIPT＆GT;低于很多人提到解决方案似乎有希望的，但不是为我工作的Safari浏览器。然而prestaul的第二个建议，精美的作品：
The <noscript> solution mentioned by many people below seems promising, but isn't working for me on Safari. However Prestaul's 2nd suggestion works beautifully:
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
这随后可以使用直CSS样式：
This can then be styled using straight 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; }
这第二行是仅供参考，可以（也应该）被删除，以避免情况下你的元素不应该显示：块。同样，您可能需要在第三行其他显示风格不同的变化。但是，这种解决方案是非常干净的，国际海事组织，并在我的测试中完全消除了闪烁效果。
This second line is just for reference and can (and should) be removed to avoid circumstances where your element shouldn't be display:block. Likewise, you may need different variations on the third line for other display styles. But this solution is nice and clean, IMO, and in my tests entirely eliminates the flicker effect.
推荐答案
如何结合这些解决方案的：
How about combining some of these solutions:
<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>
或I preFER添加类主体（请将＆LT;脚本＆GT; 标签在机身顶部，并没有使用。就绪事件）：
or I prefer adding a class to the body (place your <script> tag at the top of the body and don't use the .ready event):
<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>
这篇关于如何消除后期渲染＆QUOT;忽悠＆QUOT;？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
