Question

如果选项列表的值不等于1，我想隐藏一个div元素。我正在使用jquery来隐藏/显示该元素。

   if ($("#prov").val() == "0") {
       $("#label1").hide();
       $("#list1").hide();
   } else {
       $("#label1").show();
       $("#list1").show();
   }

但是，如果值等于0，在隐藏元素之前总是有几秒钟的延迟。我的HTML代码在开头，而javascrip / jquery代码在结尾，因为我无法隐藏/显示该元素如果尚未创建。

此外，我尝试在CSS中使用hidden属性，但得到的结果相同。

hidden{
    display: none;
}

下面是div元素。

<div>
    <label>Location:</label>
    <div>
        <select class="form-control" id="label1">
            <option label=" "></option>
            <option value="1">Canada</option>
            <option value="0">Other</option>
        </select>
    </div>
</div>

<div>
    <label id="list1">Province:</label>
    <div>
        <select>
            <option value="  "> </option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NT">Northwest Territories</option>
            <option value="NS">Nova Scotia</option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="YT">Yukon</option>
        </select>
    </div>
 </div>

谢谢。

Answer 1

输入值

.show(0)

这将防止隐藏和显示之间的任何默认延迟。默认设置为400毫秒。

持续时间（默认值：400）

https://api.jquery.com/show/

Answer 2

造成延迟的原因是因为文件末尾包含了JavaScrip / JQuery。

FOUC（未样式化内容的闪烁）是网页的实例   载入之前，会以浏览器的默认样式短暂显示   外部文件，因为Web浏览器引擎在   检索到所有信息。   样式规则已加载并应用；但是这种转变可能是   分心。

来源：https://en.wikipedia.org/wiki/Flash_of_unstyled_content

我为此问题找到的解决方案是隐藏网页的正文，直到加载整个页面（包括JavaScript / JQuery文件）为止。加载完所有内容后，它将同时显示正文部分，这将消除延迟：

隐藏正文部分：

<body style="visibility: hidden;" onload="js_Load()">

visible属性指定元素是否为可见。

编写包含以下内容的JavaScript函数js_Load()：

document.body.style.visibility='visible';

隐藏元素，延迟1秒

2 个答案: