我的页面上有一个预加载器,它应该只在您第一次进入网站时显示。它几乎可以工作,但是当我第一次进入我的网站时,我看到了 0.5 的网站内容,然后才看到我的预加载器。但我不想立即看到内容。我只想在我的预加载器淡出时看到它。我该怎么做?
parents div 需要是一个 flexbox。
<div id="over">
<img src="sourse.jpg" class="pic">
</div>
#over {
display: none;
z-index: 10000000000;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
}
.pic{
margin: auto;
}
if (sessionStorage.getItem('dontLoad') == null){
$("#over").css("display", "flex");
$("#over").delay(3500).fadeOut(1800);
$(".pic").delay(2500).fadeOut(2300);
sessionStorage.setItem('dontLoad', 'true');
}
最佳答案
预加载动画完成后需要设置回调,然后显示内容。
在我看来,如果您需要将父 div 作为 flexbox,您可以尝试使用 visibility:hidden;
来隐藏内容,而不是将其设置为 display:none;
。
CSS
#over {
display: flex;
visibility:hidden;
z-index: 10000000000;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
}
JS
if (sessionStorage.getItem('dontLoad') == null){
$(".pic").delay(2500).fadeOut(2300, function(){
$( "#over" ).animate({
visibility: visible
}, 3500);
});
sessionStorage.setItem('dontLoad', 'true');
}
关于javascript - 只显示一次预加载器而不显示正文内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37870631/