2017-12-11 5 views
-1

今、次のコードをオンラインで見つけました。グレーのローディングオーバーレイの前にdivレイヤーを表示できるように変更する必要があります。ローディングクラスの前にレイヤーを表示する方法

この場合、body onload関数を使用してdivレイヤーを表示させることはできますか?あなたはここにアクションでコードのこの部分を見ることができます: https://jsfiddle.net/t9tmzws4/

html { 
 
    -webkit-transition: background-color 1s; 
 
    transition: background-color 1s; 
 
} 
 

 
html, 
 
body { 
 
    min-height: 100%; 
 
} 
 

 
html.loading { 
 
    background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px; 
 
    -webkit-transition: background-color 0; 
 
    transition: background-color 0; 
 
} 
 

 
body { 
 
    -webkit-transition: opacity 1s ease-in; 
 
    transition: opacity 1s ease-in; 
 
} 
 

 
html.loading body { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0; 
 
    transition: opacity 0; 
 
} 
 

 
button { 
 
    background: #00A3FF; 
 
    color: white; 
 
    padding: 0.2em 0.5em; 
 
    font-size: 1.5em; 
 
}
<html class="loading"> 
 
<head> 
 
    <script> 
 
    var html = document.getElementsByTagName('html')[0]; 
 
    var removeLoading = function() { 
 
     // In a production application you would remove the loading class when your 
 
     // application is initialized and ready to go. Here we just artificially wait 
 
     // 3 seconds before removing the class. 
 
     setTimeout(function() { 
 
     html.className = html.className.replace(/loading/, ''); 
 
     }, 3000); 
 
    }; 
 
    removeLoading(); 
 
    </script> 
 

 
</head> 
 
<body> 
 
    sdfsdfsdfsdf 
 
</body> 
 

 
</html>

+0

'上はoverlay'まだ不明グレーのローディングの前でのdivレイヤを表示することができます!もっと詳しく説明しよう – Pedram

+0

あなたのブラウザを開いたときに、上記のコードで最初に見たことはありますか?消えて3〜4秒後にページの内容を明らかにするグレーのローディング層。だから私が望むのは、このグレーのローディングレイヤーの前にテキストとイメージを含むレイヤーを表示することだけです。コードに気付いた場合、主な内容を読み込んでいる間スピナーを表示するようにプログラムされています。背景画像の代わりにレイヤーが必要です。クリア? –

+0

ええ、問題は、単に 'class'を' html'タグに追加し、ページが読み込まれるときにそれを削除することです。別のコードを試してみてください。このコードを使用することに抵抗しない場合は、別のコードを使用するのに役立つと教えてください。 – Pedram

答えて

0

それはloadingクラスありながら唯一の方法はhtmlタグにpseudo elementです:

html.loading::before { 
    content: "Loading..."; 
    color: #ff5656; 
    font-size: 50px; 
    text-align: center; 
    display: block; 
} 

をあなたがしたい場合は、と画像などのような別のものを追加することができますhtml

html { 
 
    -webkit-transition: background-color 1s; 
 
    transition: background-color 1s; 
 
} 
 

 
html.loading::before { 
 
    content: "Loading..."; 
 
    color: #ff5656; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
html, 
 
body { 
 
    min-height: 100%; 
 
} 
 

 
html.loading { 
 
    background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px; 
 
    -webkit-transition: background-color 0; 
 
    transition: background-color 0; 
 
} 
 

 
body { 
 
    -webkit-transition: opacity 1s ease-in; 
 
    transition: opacity 1s ease-in; 
 
} 
 

 
html.loading body { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0; 
 
    transition: opacity 0; 
 
} 
 

 
button { 
 
    background: #00A3FF; 
 
    color: white; 
 
    padding: 0.2em 0.5em; 
 
    font-size: 1.5em; 
 
}
<html class="loading"> 
 
<head> 
 
    <script> 
 
    var html = document.getElementsByTagName('html')[0]; 
 
    var removeLoading = function() { 
 
     // In a production application you would remove the loading class when your 
 
     // application is initialized and ready to go. Here we just artificially wait 
 
     // 3 seconds before removing the class. 
 
     setTimeout(function() { 
 
     html.className = html.className.replace(/loading/, ''); 
 
     }, 3000); 
 
    }; 
 
    removeLoading(); 
 
    </script> 
 

 
</head> 
 
<body> 
 
    sdfsdfsdfsdf 
 
</body> 
 

 
</html>

+0

これは私の質問に記載されているように完全に動作します。私はcontentプロパティが例えば

helloworld

のhtmlタグを受け入れることができるかどうか疑問に思っていました。そして、これを使って表示する必要がある画像とテキストを表示することができました。 –

+0

@KubenPadayacheeいいえ、 'html'タグは受け付けませんが、簡単に画像を使うことができます。たとえば、 'html.loading :: after {content:" "、width:200px;高さ:200px;背景:url( '..');表示:ブロック} ' – Pedram

関連する問題