解决方法
长话短说,元素会闪现是因为jq控制了元素的隐藏(hide方法),但js加载有延迟,导致元素不能马上隐藏,会显现一下。
只要在元素加载的过程隐藏就不会出现这个问题,即在需要隐藏的HTML标签中添加hidden
属性:
<div id="curtain" hidden></div>
这样子刷新后就不会闪现了。
修改前
比如在一个页面中添加了一个固定在浏览器中心position:absolute
的div,平常的时候需要它隐藏,只有触发特定事件才会显现。例子:
$("#curtain, #content").hide(); //隐藏幕布和内容
$("#publish").click(function (){ //点击按钮后才弹出
$("#curtain, #content").show();
});
$("#curtain, #concel").click(function() { //点击“取消”后关闭
$("#curtain, #content").hide();
});
HTML:
<!-- 幕布 -->
<div id="curtain"></div>
<!-- 内容 -->
<div id="content"></div>
但由于是使用了JQuery的hide()方法控制#curtain
和#content
的隐藏,而页面加载js需要一定时间,这才导致了每次刷新网页时,元素会显现一下再隐藏。
解决以上问题很简单,只需在HTML需要隐藏的标签中添加hidden
属性即可。
<!-- 幕布 -->
<div id="curtain" hidden></div>
<!-- 内容 -->
<div id="content" hidden></div>
这样一来,页面会在HTML页面加载的同时把这两个div隐藏,就不会导致元素闪现一下再隐藏的情况了。