Modify DOM while page is rendering

Question

I am working on a page that has a large number of <inputs> and takes a very long time to finish rendering. I cannot change the contents of the page, only add JavaScript (including inline code). I need to prevent the user from interacting with the form until it has fully loaded, preferably by temporarily disabling the <inputs>. Is this possible?

Answer 1

Like Matthew said in his comment, hide your inputs with CSS first. Then add a class that shows them once the document is ready. Assuming you have jQuery:

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

And then your 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
}

Of course, for your form selector, ideally you would have an id or class name that your could use. As long as it's unique to that form on that page.