ボディーの内容を表示せずにプリローダーを1回だけ表示する

Question

私はページにプリローダーを持っています。それはほとんど動作しますが、初めてサイトに入ると0.5のサイトのコンテンツが表示され、それから私のプリローダーだけが表示されます。しかし、私はコンテンツをすぐに見たいとは思わない。私はプリローダーがフェードアウトしたときにだけそれを見たい。どうしたらいいですか？

parents divはフレックスボックスである必要があります。

<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が必要な場合は、代わりにdisplay:none;に設定してコンテンツを隠すのにvisibility:hidden;を使ってみることができます。

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