如何使用JS在页面出现之前、刷新之后显示元素

How to show an element, using JS, before the page appears, after a refresh

本文关键字：刷新 之后 元素 显示 JS 何使用      更新时间：2023-09-26

我使用JQuery显示"Field2"(下拉)如果"Field1"(下拉)有一个值"是"，否则保持"Field2"隐藏。这工作得很好，除非我刷新执行以下操作的页面:

1)加载页面

2)检查"Field1"中的"是"，如果是，则显示"Field2"，导致页面加载后"Field2"显示"时出现"颤栗"效果。如果在页面加载之前执行此步骤会更好。

下面是我当前的代码:

<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>

如果页面没有刷新，上面的代码可以正常工作。那么，我如何在页面加载之前"显示"Field2，以消除这种"抖动"效果?

提前感谢。

编辑:

得到了Cerbrus答案的启发。

基本上，我使用"display:none"隐藏了周围的DIV，然后在JS逻辑处理后"显示"它。然而关键的一点是要包括:

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

您最好的选择是使用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"/>

相关文章：