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'; 
    } 
}