爲HTML頁面製作Javascript預加載器

我想爲我的項目製作一個JavaScript（JavaScript動畫）作爲網站的預加載器。沿此線爲HTML頁面製作Javascript預加載器

東西： http://soulwire.github.io/Plasmatic-Isosurface/

我想這是第一次運行，直到我的網頁元素被下載之後，它應該關閉，並顯示完全加載頁面

是這可能嗎？

感謝

下面是一個示例HTML代碼我想測試它

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

**編輯給您一個div需要爲你的動畫代碼道歉

<!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/ – Nezir

這是適用於CSS動畫，而不是一個javascript一。如果我錯了，請糾正我（並對不起） –

您可以默認顯示預加載器。一旦網頁被完全加載，你只需隱藏它。下面是一個代碼示例

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

把一切與一個id和一切你需要爲你的內容在另一個。在你的樣式表中給你的內容display: none。現在您可以使用window.onload更改樣式document.getElementbyId().style.display = none/inline

來源

2017-10-08 19:58:50 Max

但是，如何將此實現爲JavaScript？此代碼產生動畫 <畫布類= 「預加載」 ID = '畫布'> –

爲HTML頁面製作Javascript預加載器

回答

相關問題