Change Background on ID load
Question
I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 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>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
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>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
1 answers
solution1
0 ACCPTED 2017-04-14 14:55:59
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() { toggleClass(document.getElementById('page'), 'hidden'); toggleClass(document.getElementById('loading'), 'hidden'); }); function onReady(callback) { var intervalID = window.setInterval(function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) { window.clearInterval(intervalID); callback.call(this); } }, 1000); } // http://youmightnotneedjquery.com/ function toggleClass(el, className) { if (el.classList) el.classList.toggle(className); else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); } }
body { background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x; font-family: "Brush Script MT", cursive; } h1 { font-size: 2em; margin-bottom: 0.2em; padding-bottom: 0; } p { font-size: 1.5em; margin-top: 0; padding-top: 0; } #loading { position: absolute; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background-color: rgba(192, 192, 192, 0.9); background-image: url("http://i.stack.imgur.com/MnyxU.gif"); background-repeat: no-repeat; background-position: center; } .hidden { display: none !important; }
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script> <div id="page" class="hidden"> <h1>The standard Lorem Ipsum passage</h1> <div class="content" data-lorem="7s"></div> </div> <div id="loading"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
change the background of an id that is clicked
How to get ID and change background
Javascript to change background of element with id
change a tag background color by ID
Background color change on page load
JavaScript change DIV background using ID
change background of selected navigation for the next load
How to change the background image with each load
JavaScript Background Image Change on page load on Impresspages
jQuery.Lazy() - lazy load background image of section with id
Related Tags