javascript - 在页面渲染时修改 DOM

Question

我正在处理一个具有大量<inputs>的页面，并且需要非常很长时间才能完成渲染。我无法更改页面的内容，只能添加 JavaScript(包括内联代码)。我需要防止用户在表单完全加载之前与表单交互，最好是暂时禁用 <inputs>。这可能吗？

Answer 1

就像 Matthew 在他的评论中所说的那样，首先用 CSS 隐藏你的输入。然后添加一个类，在文档准备好后显示它们。假设你有 jQuery:

$(document).ready(function() {
  $('form[name=someUniqueName]').addClass('loaded');
});

然后是你的CSS:

form[name=someUniqueName] input {
  display: none;  // or visibility: hidden; if you want it to take up it's space
}

.loaded form[name=someUniqueName] input {
  display: initial; // or whatever you want it to be
}

当然，对于您的表单选择器，理想情况下您应该有一个可以使用的 ID 或类名称。只要它对于该页面上的表单是唯一的。