Как показать элемент, используя JS, перед тем, как появится страница, после обновления

Question

Я использую JQuery для отображения «Field2» (раскрывающийся список), если «Field1» (Dropdown) имеет значение «Да», Поле2 "скрыто. Это отлично работает, если я обновить страницу, которая выполняет следующее:

1) Нагрузка Page

2) Проверьте «Да» в «Field1», и если да отображать «Field2», в результате чего «дрожи «эффект как« Поле2 »« показывает »после загрузки страницы. Было бы лучше, если бы этот шаг был выполнен до загрузки страницы.

Вот мой текущий код:

<script type="text/javascript"> 

$(document).ready(function() { 

    if ($("#Field1").val()=="Yes") { 
     //show the hidden div 
     $("#Field2").show("fast"); 
    } 
    else { 
     //otherwise, hide it 
     $("#Field2").hide("fast"); 
    }   
    $("#Field1").change(function() { 
     // If checked 
     if ($("#Field1").val() == "Yes") { 
      //show the hidden div 
      $("#Field2").show("fast"); 
     } 
     else { 
      //otherwise, hide it 
      $("#Field2").hide("fast"); 
      $("#Field1").val(""); 
     } 

    }); 


}); 
</script> 

Приведенный выше код работает отлично, если страница не обновляется. Итак, как я могу «показать» поле2 до загрузки страницы, чтобы удалить этот эффект «содрогания»?

Большое спасибо заранее.

EDIT:

Got к silution вдохновленный ответ Cerbrus в.

В основном я спрятал окружающий DIV, используя «display: none», а затем «показал» его после обработки логики JS. Однако ключевой бит должен был включать в себя:

setTimeout(function() { $("#WrapperDiv").show(); }, 20); 

Answer 1

Ваш лучший вариант должен был бы использовать CSS, чтобы установить оба поля скрыты, и затем показать одну из них на основе стоимости #Field1.

Что-то вроде этого:

alert("Simulating page load"); 
 
setTimeout(function(){ 
 
    $("#Field2").show(); // Your logic to choose the correct field, here. 
 
}, 2000);

input.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="Field1" value="Field 1" class="hidden"/> 
 
<br /> 
 
<input type="text" id="Field2" value="Field 2" class="hidden"/>