1

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>
Improve this question
2
  • ihatetomatoes.net/create-custom-preloading-screen Commented Oct 8, 2017 at 19:54
  • That is applicable to a css animation, not a javascript one. Please correct me if I'm wrong (and sorry) Commented Oct 8, 2017 at 20:21

2 Answers 2

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Of course, if the preloader takes longer to load than the content, you’ll never see the preload content.
I've tried doing this, but the thing is the javascript stays on event after I ran your suggestion. The javascript requires very little to load and is very small but it produces a "interactive picture""
That's true @ScottMarcus, need to make sure the preloader is light weight so that it loads faster.
Can you please explain what you mean by the javascript stays on event after I ran your suggestion ? @ShaunF
@Obie After a bit of fine tuning I got it to work, Your solution helped tons! Thanks a lot!
|
1

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

Improve this answer

1 Comment

How do I implement this to a javascript though? this code produces the animation <canvas class="preloader" id='canvas'></canvas> <script src="js/index.js"></script>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.