今、次のコードをオンラインで見つけました。グレーのローディングオーバーレイの前に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>
'上はoverlay'まだ不明グレーのローディングの前でのdivレイヤを表示することができます!もっと詳しく説明しよう – Pedram
あなたのブラウザを開いたときに、上記のコードで最初に見たことはありますか?消えて3〜4秒後にページの内容を明らかにするグレーのローディング層。だから私が望むのは、このグレーのローディングレイヤーの前にテキストとイメージを含むレイヤーを表示することだけです。コードに気付いた場合、主な内容を読み込んでいる間スピナーを表示するようにプログラムされています。背景画像の代わりにレイヤーが必要です。クリア? –
ええ、問題は、単に 'class'を' html'タグに追加し、ページが読み込まれるときにそれを削除することです。別のコードを試してみてください。このコードを使用することに抵抗しない場合は、別のコードを使用するのに役立つと教えてください。 – Pedram