Making a Javascript a preloader for a HTML Page
Question
I want to make a javascript (a javascript animation) as a preloader for a website for my project.
Something along the lines of this: http://soulwire.github.io/Plasmatic-Isosurface/
I want this to run first and until the elements of my page are downloaded and after that it should turn off and show the completely loaded page
Is this possible?
Thanks
Here's a sample HTML Code I want to test it on
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preloader"></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
</html>
**EDIT TO CODE APOLOGIES
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Preloader Testing</title>
<style>
.preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="preloader" id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
2 answers
solution1
1 2017-10-08 19:58:50
Put everything you need for your animation in a div with an id and everything you need for your content in another. Give your content display: none in your stylesheet. Now you can use window.onload to change the styles document.getElementbyId().style.display = none/inline
solution2
1 ACCPTED 2017-10-08 20:02:23
You can show the preloader by default. And once the web page is completely loaded, you just hide it. Here is a code sample
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Javascript preloader</title> <link rel="stylesheet" href="css/style.css"> <style> /*Styling preloader*/ .preloader{ /* Making the preloader floating over other elements. The preloader is visible by default. */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; } </style> </head> <body> <div class="preloader"><span class="preloader-js"></span></div> <canvas id='canvas'></canvas> <script src="js/index.js"></script> <img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img> </body> <script> //after window is loaded completely window.onload = function(){ //hide the preloader document.querySelector(".preloader").style.display = "none"; } </script> </html>
Thanks
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.