ボディを表示するよりも隠れているCSSローダーを作成する方法

Question

私のウェブページのローダーを作成したいと思いますが、アニメーションローダーが表示されている間にボディーを隠す方法がわかりません。装填が完了した後に体を表示する。ここにローダー本体のCSSがあります。{

background-color:crimson; 
    height:100%; 
    width:100%; 
} 
.one, .two, .three { 
    height:25px; 
    width:25px; 
    background-color:white; 
    border-radius:100%; 
    float:left; 
    margin:5px; 
} 
.main { 
    padding-top:25%; 
    padding-left:47%; 
} 
.one { 
    animation-name:dot-one; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.10s; 
} 
.two { 
    animation-name:dot-two; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.20s; 
} 
.three { 
    animation-name:dot-three; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-delay:0.30s; 
} 
@keyframes dot-one { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 
@keyframes dot-two { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 
@keyframes dot-three { 
    0% {transform:scale(.5);} 
    50% {transform:scale(1);} 
    100% {transform:scale(.5);} 
} 

Answer 1

実際のコードは動作しません。あなたがjqueryを使うことができれば、私はそれにどのようにアプローチするのでしょう。 <div>コンテナ内のすべてのコンテンツをラップして非表示にします。次に、ローディングイメージは、コンテナ1の外側の別の<div>の内側に配置する必要があります。

完全なページと画像が読み込まれたら、読み込み中の画像を非表示にしてコンテナを表示するためのJavaScript関数を起動できます。

$('.content').hide(); 
 
    $(window).on("load", function() { 
 
     $('.loader').hide(); 
 
     $('.content').show(); 
 
    });

body { 
 
     position: relative; 
 
    } 
 

 
    .content { 
 
     width: 100%; 
 
     height: 100vh; 
 
     display: block; 
 
    } 
 

 
    .loader { 
 
     position: absolute; 
 
     top: 50px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg"> 
 
    <img src="http://freebigpictures.com/wp-content/uploads/2009/09/hill.jpg"> 
 
     </div> 
 
     <div class="loader"> 
 
      <img src="https://media4.giphy.com/media/y1ZBcOGOOtlpC/200_s.gif"> 
 
     </div>

スニペットは、2枚の大きなサイズの画像をロードします。スニペットを再度実行する前に、ブラウザのキャッシュを削除する必要があります。この助けを願っています。