javascript - 避免动态表单中的 Javascript 跳跃元素

Question

我正在尝试使用 javascript 编写一个动态表单，其中根据是否选中复选框来显示或隐藏元素。

在大多数情况下，它工作正常。我定义了读取复选框值的方法，并相应地重新排列页面，然后将它们设置为复选框的 onclick 方法。然后我还将它们设置为在文档加载时运行一次，以便页面在用户刷新时正确呈现，代码如下 Event.observe(window, 'load', manageCheckbox1); (这使用 Prototype 库将其设置为在加载时运行；我不太确定为什么这比在所有相关元素之后对放置在 html 中的函数的原始调用更好，但这是我看到其他人这样做的方式) .

但是，这种方法的问题在于，在运行 javascript 之前，页面在加载时会出现一瞬间可见，然后所有元素都会随着 javascript 插入或删除元素而跳转。

是否有更好的方法来避免令人不快的跳跃效果？

Answer 1

通过 css 规则使您的表单不可见，并在您通过函数重新排列它们后使用原型(prototype)库将其设置为可见..

所以你的表单应该是这样的

<form ...... class="just_loading">

你的css应该有

.just_loading{display:none;}

并在您的 manageCheckbox1 函数的末尾添加

$$('.just_loading').removeClassName('just_loading');

更新
如果您希望页面在没有 javascript 的情况下也能正常工作，请使用以下内容创建 css 规则。

<script type="text/javascript">
  document.write( '<style type="text/css">.just_loading{display:none;}</style>' );
</script>

这样，如果禁用了 javascript，则根本不会创建隐藏表单的规则。