Preload A Graphic while form renders

Forms Public Forms
1

I have a form that does some hiding of elements with JS that are displayed depending on selections. However when the form is presented for about 1 second all the fields show up then hide. I'd like to preload something giving the form time to complete the rendering. Is this possible?

2

Dear @IT.Joe,
If you hide the fields with CSS (for example, give them a custom class which is hidden by default), and then use JS to show them instead, they shouldn't appear even for a second while the form loads.

The image can be added and shown in the same way as you are currently hiding the fields - leave it as it is, and then hide with JS in fd.rendered() event.

3

So I added all fields to a grid. Then gave the grid a class of hidecontainer. The in the fd.rendered() event I added $('.hidecontainer').hide(); which worked to hide but it still showed the full form for a brief second. It's not THAT big of deal for the user to see this but I guess I'd like it to look better by only displaying the fields I want them to see no matter what. I'm included a screen capture of what I mean.

4

As I've said, don't hide the fields (or the grid) with JS. Instead, open CSS editor and use the following CSS code:

.hidecontainer{
  display: none;
}

Then, instead show the fields/grid with the following JS code:

fd.rendered(function(){
  $('.hidecontainer').show();
});