Material CSS - 在页面加载后停止预加载器
问题描述:
我在玩MaterialCSS并想使用它们提供的预加载器类,特别是liner Determinate class。使用它很简单,因为我可以将它添加到我的网页的顶部:Material CSS - 在页面加载后停止预加载器
<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加载,并使其在页面加载时消失。在正确的方向轻推将不胜感激
答
我想你要找的是以下
- 一个简单的基本HTML与装载机
- 呈现快速异步加载您的应用程序代码页
- 当你的应用程序代码完成加载时,用你的应用程序代替加载器。
这里是一个仿真,使其更有点清楚
// 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>
答
从Materialise的文档,它看起来像i
将需要1 +百分比/像素/ EM。目前这只是一个数字。
而且,你的循环也许应该是:
function progbar() {
for (i = 0; i < 100; i++) {
document.getElementById("loader").style.width = i + 'px';
}
}
似乎做任何事情.. – Beginner