Скрытие элемента, пока JS работает в фоновом режиме, а затем снова показать

Question

По сути, это то, что я хочу сделать:

1. Скрыть элемент1
2. Запустить JS-функцию, относящуюся к элементу1
3. Показать элемент1

Цель состоит в том, чтобы не показывать элемент пользователю, пока он изменяется в фоновом режиме JS, и после выполнения функции JS показать этот элемент снова.Таким образом, пользователь не видит всех происходящих изменений.

Итак, возможно ли изменить CSS элемента на основе функции JS, завершающей его выполнение?

Контекст:

Я провожу тест на нашем сайте между контролем и экспериментом.Сайт загружает страницу, а затем запускает мой тестовый код (JS, о котором я говорил выше).Поэтому пользователь видит обычный веб-сайт, затем он исчезает и видит изменения, происходящие до того, как он, наконец, загрузит тест.Это ужасно с точки зрения UX, поэтому я планирую, чтобы все выглядело как пробел, пока не загрузится окончательная версия - отсюда и вопрос.

Answer 1

$('#container').hide();
var content='';
for(var i=0;i<10;i++)
{
content+='<tr><td> Row No'+(i+1)+'</td><td> User'+(i+1)+'</td></tr>';
}
$('#tbl').append(content);
$('#tbl tr:gt(5)').remove();

$('#btnShow').click(function(){
$('#container').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='container'>
<table id='tbl'>
<tr><td> Row Number</td> <td> User Name</td>
</tr>
</table>
</div>
<input type="button" value="Show UI" id="btnShow"/>

Код не требует пояснений.Оберните свои объекты под родительским div, спрячьте его перед всем рендерингом, затем снова покажите родительский div, когда вы будете готовы к работе !!!