プリロード画面の背後にあるコンテンツを非表示にする

Question

サイトのコンテンツが読み込まれている間に私のサイトに表示されるプリロード画面があります。私が実行している問題は、ロード画面が消える前に、サイトのコンテンツの一部が表示されることです。具体的には、私は、ページヘッダーと、ホームページ上で左右にスライドするボタンを持っています。ロード画面が消えて2つの画面のテキストが混乱する前に、これらがスライドすることがあります。私は、ロード・スクリーンがなくなる前にアニメーションが発生しても、そこにあるヘッダーとボタンはユーザーに表示されないようにしたいと考えています。負荷画面が消えるまでこれらのアニメーションを行わない方が良いでしょう。プレロード画面が消えるまでアニメーションを十分に遅らせるように設定できますが、負荷画面がすぐに消えてしまうと、アニメーションが発生するまでにかなり長い待ち時間が生じることがあります。ここで

コード

HTML

<div id="load_screen" class="text-center"> 
<div id="loading" class="text-center"> 
    <h3>Welcome to Jack Loud Photo!</h3> 
    <p>Loading content...</p><i class="fa fa-spinner fa-spin fa-2x" aria- 
    hidden="true"></i> 
</div> 
</div> 

CSS

div#load_screen { 
background: #000; 
opacity: 1; 
position: fixed; 
z-index: 1; 
top: 0px; 
width: 100%; 
height: 1600px; 
font-family: 'Open Sans', sans-serif; 
} 

div#load_screen > div#loading { 
color: #FFF; 
width: 80%; 
margin: auto; 
margin-top: 300px; 
font-family: 'Open Sans', sans-serif; 
} 

#loading > i.fa-spinner { 
background-color: transparent; 
color: #28CC9E; 
} 

されるJavaScript

window.addEventListener("load", function() { 
    var load_screen = document.getElementById("load_screen"); 
    document.body.removeChild(load_screen); 
}); 

Answer 1

はz-index問題のようですね。あなたはどの要素がより高いz-indexを持っているかを見ることができ、あなたの#load_screenがより高いことを確認します。

しかし、ページ上のすべてのものは、デフォルトでは隠されているように、簡単な方法は、要素でページをラップ（#pageをなど）opacity: 0またはdisplay: noneにそれを設定し、その要素の#load_screen外を持っているだろう、とだけ#load_screen表示されます。

次にウィンドウのloadイベントに、/非表示#load_screenを削除し、displayまたは#pageのopacity切り替えます。読み込み画面以外のすべてを隠すのとは別に、要素がポップアウトして表示されないように、ページにきれいなUI /効果を追加します。ここで

window.addEventListener("load", function() { 
 
    var load_screen = document.getElementById("load_screen"); 
 
    document.body.removeChild(load_screen); 
 
    document.getElementById('page').classList.add('ready'); 
 
});

div#load_screen { 
 
background: #000; 
 
opacity: 1; 
 
position: fixed; 
 
z-index: 1; 
 
top: 0px; 
 
width: 100%; 
 
height: 100vh; 
 
font-family: 'Open Sans', sans-serif; 
 
} 
 

 
div#load_screen > div#loading { 
 
color: #FFF; 
 
width: 80%; 
 
margin: auto; 
 
margin-top: 300px; 
 
font-family: 'Open Sans', sans-serif; 
 
} 
 

 
#loading > i.fa-spinner { 
 
background-color: transparent; 
 
color: #28CC9E; 
 
} 
 
#page { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
} 
 
#page.ready { 
 
    opacity: 1; 
 
}

<div id="page"> 
 
    <img src="http://www.clker.com/cliparts/0/f/d/b/12917289761851255679earth-map-huge.jpg"> 
 
</div> 
 
<div id="load_screen" class="text-center"> 
 
<div id="loading" class="text-center"> 
 
    <h3>Welcome to Jack Loud Photo!</h3> 
 
    <p>Loading content...</p><i class="fa fa-spinner fa-spin fa-2x" aria- 
 
    hidden="true"></i> 
 
</div> 
 
</div>