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');
}