JQuery使用hide()方法后 刷新网页元素会闪一下解决方法

解决方法

长话短说,元素会闪现是因为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隐藏,就不会导致元素闪现一下再隐藏的情况了。

你可能感兴趣的:(javascript,jquery,html)