javascript - 只显示一次预加载器而不显示正文内容

Question

我的页面上有一个预加载器，它应该只在您第一次进入网站时显示。它几乎可以工作，但是当我第一次进入我的网站时，我看到了 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');
} 

Answer 1

预加载动画完成后需要设置回调，然后显示内容。在我看来，如果您需要将父 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');
}