Material CSS - 在頁面加載後停止預加載器

Question

我在玩MaterialCSS並想使用它們提供的預加載器類，特別是liner Determinate class。使用它很簡單，因爲我可以將它添加到我的網頁的頂部：

<div class="progress"> 
     <div class="determinate" id="loader" onload="progbar();"></div> 
    </div> 

我試圖黑客一起一些JavaScript（我不知道jQuery的想法）使用這個動態更新寬度：

function progbar() { 
    for (i = 1; i = 100; i++) { 
    document.getElementById("loader").style.width = i; 
    } 
} 

但是這dosnt工作（即看起來像width=0）。我只是試圖讓進度條從0 - 100加載，並使其在頁面加載時消失。在正確的方向輕推將不勝感激

Answer 1

我想你要找的是以下

1. 一個簡單的基本HTML與裝載機
2. 呈現快速異步加載您的應用程序代碼頁
3. 當你的應用程序代碼完成加載時，用你的應用程序代替加載器。

這裏是一個仿真，使其更有點清楚

// simulate async loading of your app scripts... 
 
setTimeout(appReady, 2000); 
 

 

 
function appReady() { 
 
    let appContainer = document.getElementById("appContainer"); 
 
    while (appContainer.firstChild) { 
 
    appContainer.removeChild(appContainer.firstChild); 
 
    } 
 

 
    let app = document.createElement("div"); 
 
    app.textContent = "your app"; 
 
    appContainer.appendChild(app); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" /> 
 

 
<div id="appContainer"> 
 
    <div class="progress"> 
 
    <div class="indeterminate"></div> 
 
    </div> 
 
</div>

Answer 2

從Materialise的文檔，它看起來像i將需要1 +百分比/像素/ EM。目前這只是一個數字。

而且，你的循環也許應該是：

function progbar() { 
    for (i = 0; i < 100; i++) { 
    document.getElementById("loader").style.width = i + 'px'; 
    } 
}