Nick Vlasov Nick Vlasov - 5 months ago 34
HTML Question

Show preloader only once without showing body content

I have a preloader on my page that should be showed only when you enter to site. It works almost good, but when I enter to my site for the first time I see the content of the site for 0.5 and only then my preloader. But I don't wanna see the content instantly. I wanna see it only when my preloader fades out. How can I do it?
parents div needs to be a flexbox.

HTML code



<div id="over">
<img src="sourse.jpg" class="pic">
</div>


CSS code



#over {
display: none;
z-index: 10000000000;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
}

.pic{
margin: auto;
}


JS



if (sessionStorage.getItem('dontLoad') == null){
$("#over").css("display", "flex");
$("#over").delay(3500).fadeOut(1800);
$(".pic").delay(2500).fadeOut(2300);
sessionStorage.setItem('dontLoad', 'true');
}

Answer

You need to set a callback after the preloader animation is complete, and then show the content. In my opinion if you need the parent div to be a flexbox, you could try using visibility:hidden; to hide the content instead set it to 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');
} 
Comments