JavaScriptをHTMLページのプリローダーにする

私は自分のプロジェクトのウェブサイトのプリローダーとしてJavaScript（JavaScriptのアニメーション）を作りたいと思っています。JavaScriptをHTMLページのプリローダーにする

本の線に沿って何か： http://soulwire.github.io/Plasmatic-Isosurface/

私はこれが最初に実行したいと私のページの要素がダウンロードされるまでに、それが完全にロードされたページをオフにして表示する必要があり、その後

されていますこれは可能ですか？

おかげ

は、ここで私は

<!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>

上でそれをテストするサンプルHTMLコードです** EDIT CODE謝罪TO

<!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>

出典

2017-10-08 Shaun F

あるhttps://ihatetomatoes.net/create-custom-preloading-screen/ CSSアニメーション、ないジャバスクリプトにも適用することが – Nezir

1。私が間違っている場合は私を修正してください（と申し訳ありません） –

デフォルトでプリローダーを表示することができます。そして、Webページが完全にロードされたら、それを隠すだけです。ここでのサンプルコードは、

<!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>

おかげ

出典

2017-10-08 20:02:23 Obie

を、アニメーションを生成しますコンテンツには、プレロードコンテンツは表示されません。 –

私はこれをやろうとしましたが、あなたの提案を実行した後、イベントはJavaScriptのままです。 javascriptは読み込みにはほとんど必要がなく、非常に小さいですが、 "インタラクティブピクチャ"を生成します。 –

これは本当です@ScottMarcus、プリローダが軽量であることを確認して読み込みが速くなるようにする必要があります – Obie

div要素で、あなたのアニメーションのために必要なすべてを置きますIDとあなたのコンテンツに必要なすべてを別のものに入れてください。あなたのスタイルシートにあなたのコンテンツdisplay: noneを与えてください。今すぐwindow.onloadを使用してスタイルを変更することができますdocument.getElementbyId().style.display = none/inline

出典

2017-10-08 19:58:50 Max

どうすればこれをjavascriptに実装できますか？プリローダーはよりもロードに時間がかかる場合このコードは、<=「キャンバス」キャンバスクラス=「プリローダー」id>の <スクリプトSRC =「JS/index.js」>もちろん –

JavaScriptをHTMLページのプリローダーにする

答えて

関連する問題