admin管理员组

文章数量:1289425

I want to make a javascript (a javascript animation) as a preloader for a website for my project.

Something along the lines of this: /

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 pletely 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=".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=".jpg" alt="safe"></img>
</body>
<script>
    //after window is loaded pletely 
    window.onload = function(){
        //hide the preloader
        document.querySelector(".preloader").style.display = "none";
    }
</script>
</html>

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 pletely 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./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./image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
    //after window is loaded pletely 
    window.onload = function(){
        //hide the preloader
        document.querySelector(".preloader").style.display = "none";
    }
</script>
</html>
  • javascript
  • jquery
  • html
Share Improve this question edited Oct 8, 2017 at 20:27 Shaun F asked Oct 8, 2017 at 19:48 Shaun FShaun F 951 gold badge2 silver badges8 bronze badges 2
  • ihatetomatoes/create-custom-preloading-screen – Nezir 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) – Shaun F Commented Oct 8, 2017 at 20:21
Add a ment  | 

2 Answers 2

Reset to default 5

You can show the preloader by default. And once the web page is pletely 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./image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
    //after window is loaded pletely 
    window.onload = function(){
        //hide the preloader
        document.querySelector(".preloader").style.display = "none";
    }
</script>
</html>

Thanks

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

本文标签： jqueryMaking a Javascript a preloader for a HTML PageStack Overflow

版权声明：本文标题：jquery - Making a Javascript a preloader for a HTML Page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741411674a2377274.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。