0
Idロード時のバックグラウンドをどのように変更することができますか？現在、背景はプリローダーの色に設定されています。私は体の負荷のローダーをどのように隠すことができるかを考えましたが、誰かが私の背景を絵に変える方法を教えてくれました。また、ローダーがボディポップアップの要素を表示している時に、そのことを隠すための解決策がありますか？バックグラウンドリンクはバックグラウンドIDにあります。IDロード時の背景を変更する
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>も、現在のコードが著作権で保護されていることを確認してください。私はこのローダーをページに追加して、誰かがそれを追加したりウェブページに追加したり、コードを教えたりする方法について何か提案することができます。
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}@import url('https://fonts.googleapis.com/css?family=Spirax');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>うこの作品w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW？
へようこそ。最初に[HELP center]（http://stackoverflow.com/help）に進み、[How to Ask Question]（http://stackoverflow.com/help/how-to-ask）を読んで[MCVE ：最小、完全、および検証可能な例]（http://stackoverflow.com/help/mcve）周囲の人があなたが何を意味しているのか、問題が何であるかを簡単に読んで理解できるなら、彼らはもっと助けてくれるだろう:)しかし、SOは助けになるコミュニティなので、あなたが混乱したコードを見せてくださいと私たちはそれを改善するために喜んで... – OldPadawan
いくつかのJavascriptを使用する必要があります。 –
別の読み込み関連の質問に対応して作成しました：http://stackoverflow.com/a/25253988/1762224 –